v-model 指定使用过vue的同学都应该是很熟悉的了，这里就不多介绍，本章主要就是记录一些v-model非常实用的修饰符和对于v-model在html文本框，多行文本框，选择框，单选框，复选框上对于value的绑定方式
各种框上的value绑定方式
<input type=”text”/>
<input v-model="message" placeholder="edit me"> //这里是与input的vaule进行绑定
<textarea>
<textarea v-model="message" placeholder="add multiple lines"></textarea> //这里是与textarea 的vaule进行绑定
<input type="checkbox"/>
<input type="checkbox" id="checkbox" v-model="checked">//复选框选中时checked 为true 未选择为false
多个复选框同时v-model一个变量
<div id='example-3'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <br>
<span>Checked names: {{ checkedNames }}</span>
</div>
//javascript
new Vue({
el: '#example-3',
data: {
checkedNames: [] //当checkNames 不是一个[]时所有的复选款共用一个状态 当一个复选款被选中时，所有的都选中，但一个处于非选中时，所有的复选框变成非选中。当它是[]，选中一个复选框，则checkNames数组中push一个元素，元素的值为复选框上的value。
当取消掉一个复选框时，复选框对应的value便会在chacheNames数组中删除
} })
<input type="radio">
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked"> <input type="radio" id="two" value="Two" v-model="picked"></div>
new Vue({
el: '#example-4',
data: {
picked: '' //哪个单选框被选中 picked就绑定框上的 value属性值
}
})
<select>
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
el: '...',
data: {
selected: '' //选中第一个选项 则值为A 选中第二个则值为B selected与option文本值绑定
}
})修饰符
.lazy 非实时更新
<input v-model.lazy="msg" >
不使用lazy修饰符时，当input的vaule改变msg就会改变 当使用lazy修饰符后 会变为使用change 事件
.number 自动将用户的输入值转化为number类型
<input v-model.number="age"/> //使用number修饰符后 如果你输入的值不能转化成number类型 那么它会自动把输入的值变成最后一次符合要求时的值 比如输入123 然后把输入值输入成123ssa 这时候输入的值不能转化成number 那么当input
//失去焦点的时候age的值会变成最后一次能够转化成number时的值123
.trim 去除输入值首位的空格符，这个是很非常实用的修饰符
<input v-model.trim="trim"/>//
