P11. vue3 v-model 原理及表单中使用

v-mode原理

<script>
export default {
  data() {
    return {
      counter: 0,
      msg: 'hellokegou',

    };
  },
  methods:{


  },
};
</script>

<template>
  <div>
    <input type="text" v-model="msg">
    <h2>{{msg}}</h2>
    <!-- v-bing绑定一个value属性 -->
    <!-- v-on给当前元素添加一个input -->
    <input type="text" :value="msg">


  </div>
</template>

<style>

</style>

<script>
export default {
  data() {
    return {
      counter: 0,
      msg: 'hellokegou',

    };
  },
  methods:{
    changeMsg(e){
      console.log(e)
      this.msg=e.target.value

    }


  },
};
</script>

<template>
  <div>
    <input type="text" v-model="msg">
    <h2>{{msg}}</h2>
    <!-- v-bing绑定一个value属性 -->
    <!-- v-on给当前元素添加一个input -->
    <input type="text" :value="msg" @input="changeMsg">


  </div>
</template>

<style>

</style>

表单中控件使用

<script>
export default {
  data() {
    return {
      counter: 0,
      msg: 'hellokegou',
      checked: '',
      // checked: true,
      fruits: [],
      sex: 'nan'


    };
  },
  methods:{
    changeMsg(e){
      console.log(e)
      this.msg=e.target.value

    }


  },
};
</script>

<template>
  <div>
    <input type="text" v-model="msg">
    <h2>{{msg}}</h2>
    <!-- v-bing绑定一个value属性 -->
    <!-- v-on给当前元素添加一个input -->
    <input type="text" :value="msg" @input="changeMsg">
    <!-- 复选框 布尔-->
    <input type="checkbox" v-model="checked">
    <h2>{{checked}}</h2>
    <!-- 多复选框-->
    <input type="checkbox" v-model="fruits" value="apple">apple
    <input type="checkbox" v-model="fruits" value="orange">orange
    <input type="checkbox" v-model="fruits" value="peer">peer
    <input type="checkbox" v-model="fruits" value="banana">banana
    <h2>like fruits {{fruits}}</h2>
    <!-- 单选框-->
    <input type="radio" v-model="sex" value="nan">nan
    <input type="radio" v-model="sex" value="nv">nv
    <h2> {{sex}}</h2>






  </div>
</template>

<style>

</style>

选项框

<script>
export default {
  data() {
    return {
      counter: 0,
      msg: 'hellokegou',
      checked: '',
      // checked: true,
      fruits: [],
      sex: 'nan',
      city: 'jilin',
      citys: []


    };
  },
  methods:{
    changeMsg(e){
      console.log(e)
      this.msg=e.target.value

    }


  },
};
</script>

<template>
  <div>
    <input type="text" v-model="msg">
    <h2>{{msg}}</h2>
    <!-- v-bing绑定一个value属性 -->
    <!-- v-on给当前元素添加一个input -->
    <input type="text" :value="msg" @input="changeMsg">
    <!-- 复选框 布尔-->
    <input type="checkbox" v-model="checked">
    <h2>{{checked}}</h2>
    <!-- 多复选框-->
    <input type="checkbox" v-model="fruits" value="apple">apple
    <input type="checkbox" v-model="fruits" value="orange">orange
    <input type="checkbox" v-model="fruits" value="peer">peer
    <input type="checkbox" v-model="fruits" value="banana">banana
    <h2>like fruits {{fruits}}</h2>
    <!-- 单选框-->
    <input type="radio" v-model="sex" value="nan">nan
    <input type="radio" v-model="sex" value="nv">nv
    <h2> {{sex}}</h2>
    <select name="" id="" v-model="city">
      <option value="beijing"> beijing</option>
      <option value="shanghai"> shanghai</option>
      <option value="wuhan"> wuhan</option>
      <option value="jilin"> jilin</option>
    </select>
    <h2>{{city}}</h2>


    <select name="" id="" v-model="citys" multiple>
      <option value="beijing"> beijing</option>
      <option value="shanghai"> shanghai</option>
      <option value="wuhan"> wuhan</option>
      <option value="jilin"> jilin</option>
    </select>
    <h2>{{citys}}</h2>






  </div>
</template>

<style>

</style>

修饰符

.lazy 在输入框失去焦点时同步

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

<script>
export default {
  data() {
    return {
      counter: 0,
      msg: 'hellokegou',
      checked: '',
      // checked: true,
      fruits: [],
      sex: 'nan',
      city: 'jilin',
      citys: []


    };
  },
  methods:{
    changeMsg(e){
      console.log(e)
      this.msg=e.target.value

    }


  },
};
</script>

<template>
  <div>
    <input type="text" v-model="msg">
    <h2>{{msg}}</h2>
    <!-- v-bing绑定一个value属性 -->
    <!-- v-on给当前元素添加一个input -->
    <input type="text" :value="msg" @input="changeMsg">
    <!-- 复选框 布尔-->
    <input type="checkbox" v-model="checked">
    <h2>{{checked}}</h2>
    <!-- 多复选框-->
    <input type="checkbox" v-model="fruits" value="apple">apple
    <input type="checkbox" v-model="fruits" value="orange">orange
    <input type="checkbox" v-model="fruits" value="peer">peer
    <input type="checkbox" v-model="fruits" value="banana">banana
    <h2>like fruits {{fruits}}</h2>
    <!-- 单选框-->
    <input type="radio" v-model="sex" value="nan">nan
    <input type="radio" v-model="sex" value="nv">nv
    <h2> {{sex}}</h2>
    <select name="" id="" v-model="city">
      <option value="beijing"> beijing</option>
      <option value="shanghai"> shanghai</option>
      <option value="wuhan"> wuhan</option>
      <option value="jilin"> jilin</option>
    </select>
    <h2>{{city}}</h2>


    <select name="" id="" v-model="citys" multiple>
      <option value="beijing"> beijing</option>
      <option value="shanghai"> shanghai</option>
      <option value="wuhan"> wuhan</option>
      <option value="jilin"> jilin</option>
    </select>
    <h2>{{citys}}</h2>
    <input type="text" v-model.lazy="msg">
    <h2>{{msg}}</h2>
    <input type="text" v-model.number="counter">
    <h2>{{counter}}</h2>

    <input type="text" v-model.trim="msg">
    <h2>{{msg}}</h2>




  </div>
</template>

<style>

</style>