v-model指定可以实现表单值与属性的双向绑定。即表单元素中更改的值会自动的更新属性中的值，属性中的值发生变化会自动更新表单里的值。
绑定的属性和事件
v-model在内部输入不同的元素使用不同的属性并抛出不同的事件。
- text和textarea元素使用value属性和input事件；
- checkbox和redio使用checked属性和change事件；
- select字段将value作为prop并将change作为事件；
修饰符：
-
.lazy：在默认情况下，v-model每次input事件触发后，将输入框的值与数据进行同步（除了上述输入法组合文字时）。当添加修饰符：.lazy后，将转变为使用change事件进行同步。
-
.number： 将用户输入的值转变为数值形式，自动删除非数值的值，只保留数值。该修饰符只在 type="number"时有效。
-
.tirm：自动过滤掉用户输入的首尾空白字符。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>Vue表单事件</title> </head> <body> <h4>绑定的属性和事件</h4> <div id="app"> <h5>checkbox：</h5> <div> 请选择四大名著： <input type="checkbox" value="西游记" v-model="choose_2">西游记 <input type="checkbox" value="红楼梦" v-model="choose_2">红楼梦 <input type="checkbox" value="数据结构" v-model="choose_2">数据结构 </div> <p>您选择的是：{{choose_2}}</p> <h5>select：</h5> <div> <select v-model="sex"> <option value="男">男</option> <option value="女">女</option> </select> 您选择的性别是：{{sex}} </div> <h4>修饰符：</h4> <h5>.lazy</h5> <div> <input type="text" v-model.lazy="msg"> 您输出的值是：{{msg}} </div> <h5>.number</h5> type="number"时有效。 <input type="number" v-model.number="age"> 您输出的年龄是：{{age}} <h5>.tirm</h5> <input type="text" v-model.tirm="msg_2"><br> 您输入的内容为：{{msg_2}} </div> <script> new Vue({ el: "#app", data: { choose_2: [], sex: '', msg: '', age: '', msg_2: '', } }) </script> </body> </html>