一、V-model在不同的表单元素上是如何使用
1.文本框绑定v-model
<p>姓名：<input type="text" v-model="student.name"/></p>
2.多行文本框绑定v-model
注意：<textarea></textarea>标签中不要写差值表达式/属性
地址：<textarea cols="30" rows="10" v-model="address"></textarea>{{address}}
3.单选框绑定v-model
v-model绑定同一个属性，
绑定相同属性name，可以只选择一个，不能同时选择。
<input type="radio" v-model="sex" value="0" name="sex">男
<input type="radio" v-model="sex" value="1" name="sex">女
<span style="color:red">{{sex}}</span>
4.复选框
①绑定单个复选框,绑定一个boolean值
是否同意：<input type="checkbox" v-model="isOk">{{isOk}}
②绑定多个复选项，绑定同一个数组
爱好：
<input v-model="hobbies" type="checkbox" value="抽烟">抽烟
<input v-model="hobbies" type="checkbox" value="喝酒">喝酒
<input v-model="hobbies" type="checkbox" value="打拳">打拳
<input v-model="hobbies" type="checkbox" value="烫头">烫头
<span>{{hobbies}}</span>
5.下拉选择框
①单选时绑定一个属性
城市：
<select v-model='citys'>
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="南京">南京</option>
<option value="澳门">澳门</option>
<option value="香港">香港</option>
</select>
<span style="color:red">{{citys}}</span>
②多选时绑定一个数组,需要添加multiple,按住ctrl+鼠标点击可多选
喜欢的食物：
<select multiple v-model="foods">
<option value="苹果">苹果</option>
<option value="橙子">橙子</option>
<option value="草莓">草莓</option>
<option value="咖啡">咖啡</option>
<option value="葡萄">葡萄</option>
<option value="蛋糕">蛋糕</option>
</select>
<span style="color:red">{{foods}}</span>
二、V-model的指令修饰符
v-model指令默认触发的是input事件，当文本框的值发生变化后，离开同步给数据
1.添加了.lazy修饰符，可以将input事件转为change事件
当input框失去焦点时触发同步数据
姓名：<input type="text" v-model.lazy="name">{{name}}
2.添加.trim修饰符，可以去除内容两端空格
姓名：<input type="text" v-model.lazy.trim="name">开始{{name}}结束
3.添加.number修饰符，可以将是数字的字符串，转为Numer类型
年龄：<input type="text" v-model.number="age">{{age+20}}
