你可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model本质上是个语法糖。它负责监听用户的输入事件以更新数据。
v-model会忽略所有表单元素的value、checked、selected的值而是将 Vue 实例的 data 数据作为数据来源。
v-model在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
text 和 textarea 元素使用valueproperty 和input事件；checkbox 和 radio 使用checkedproperty 和change事件；select 字段将value作为 prop 并将change作为事件。
文本（text）
<input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p>
多行文本（textarea）
<span>Multiline message is:</span><p style="white-space: pre-line;">{{ message }}</p><br><textarea v-model="message" placeholder="add multiple lines"></textarea>
复选框（checkbox）
单个复选框，绑定到布尔值
<input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label>
多个复选框，绑定到同一个数组
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"><label for="jack">Jack</label><input type="checkbox" id="john" value="John" v-model="checkedNames"><label for="john">John</label><input type="checkbox" id="mike" value="Mike" v-model="checkedNames"><label for="mike">Mike</label><br><span>Checked names: {{ checkedNames }}</span>
new Vue({el: '...',data: {checkedNames: []}})
单选按钮（radio）
<div id="example-4"><input type="radio" id="one" value="One" v-model="picked"><label for="one">One</label><br><input type="radio" id="two" value="Two" v-model="picked"><label for="two">Two</label><br><span>Picked: {{ picked }}</span></div>
new Vue({el: '#example-4',data: {picked: ''}})
选择框（select）
<div id="example-5"><select v-model="selected"><option disabled value="">请选择</option><option>A</option><option>B</option><option>C</option></select><span>Selected: {{ selected }}</span></div>
new Vue({el: '...',data: {selected: ''}})
修饰符
1.lazy
失去焦点或者按回车时触发
<!-- 在“change”时而非“input”时更新 --><input v-model.lazy="msg">
2.number
转为数值类型
<input v-model.number="age" type="number">
3.trim
去除收尾空格
<input v-model.trim="msg">
