Vue : v-model 双向绑定

1 . 基本使用和原理

使用v-model指令来实现表单元素和数据的双向绑定

　　v-model也可以用于textarea元素

　　原理，包含了两个操作

　　一、v-bind绑定一个value元素

　　二、v-on指令给当前元素绑定input元素

1   <input type="text" v-model="message">
2       <!--等同于下面代码-->
3       <!--<input type="text" :value="message"
4       @input='message = $event.target.value'>-->
5       {{message}}

2.v-model ： radio

1   <lable for="male">
2         <input type="radio" id="male" value="male" v-model="sex">男人
3       </lable>
4       <lable for="female">
5         <input type="radio" id="female" value="female" v-model="sex" >  女人
6       </lable>

3.v-model：CheckBox 单选对应的是Boolean，多选对应的是数组

4.v-model: select 单选对应的是一个值，多选对应的是数组

 1 <select name="abc" v-model="fruit">
 2           <option value="苹果" >苹果</option>
 3           <option value="小米" >小米</option>
 4           <option value="锤子" >锤子</option>
 5           <option value="华为" >华为</option>
 6           <option value="OPPO" >OPPO</option>
 7         </select>
 8         <h3>{{ fruit }}</h3>
 9 
10         <select name="abc" v-model="fruits" multiple>
11           <option value="苹果" >苹果</option>
12           <option value="小米" >小米</option>
13           <option value="锤子" >锤子</option>
14           <option value="华为" >华为</option>
15           <option value="OPPO" >OPPO</option>
16         </select>
17         <h3>{{ fruits }}</h3>

5.值绑定

1 <label :for="item" v-for="item in phone" >
2           <input type="checkbox" :value="item" :id="item" v-model="phones">{{ item }}
3         </label>
4         <h4>{{ phones }}</h4>

6.修饰符 lazy、

　　lazy：v-model.lazy 数据在失去焦点或者回车的时候才会更新

<input type="text" v-model.lazy="message">

　　number ：默认为字符串类型；会将内容自动转化为数字类型

　　trim：可以过滤内容左右两边的空格