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：可以过滤内容左右两边的空格