在Web应用中，我们经常会使用表单向服务端提交一些数据，而通常也会在表单项中绑定一些如input、change等事件对用户输入的数据进行校验、更新等操作。在Vue.js中我们可以使用v-model指令同步用户输入的数据到Vue示例data属性中，同时会对radio、checkbox、select等原生表单组件提供一些语法糖使表单操作更加容易。
一、基本用法
下面我们列举基本例子来看看如何使用v-model更新表单控。
1.text
设置文本框v-model为name，代码示例如下
Welcome{ {name}} 当用户操作文本框时，vm.name会自动更新为用户输入的值，同时，span内的内容也会随之改变。
2.checkbox
复选框checkbox在表单中会经常使用，下面我们来看看单个checkbox如何使用v-model。代码示例如下：
当用户勾选了checkbox时，vm.checked=true,否则vm.checked=false,label中的值也会随之改变。
3.radio
当单选钮被选中时，v-model中的变量值会被赋值为对应的value值。代码示例如下:
Picked:{ {bizLine}} 4.select
因为select控件分为单选和多选，所以v-model在select控件的单选和多选上会有不同的表现。代码示例如下：
Selected:{ {bizLine}} 当被选中的option有value属性时，vm.selected为对应option的value值；否则为对应的text值。
二、值绑定
通常情况下，对于radio、checkbox、select组件，通过v-model绑定的值都是字符串，checkbox除外，checkbox可能是布尔值。
有时我们会有动态绑定Vue.js实例属性的需求，这时可以使用v-bind来实现这个需求。通过v-bind来代替直接使用value属性，我们还可以绑定非字符串的值，如数值、对象、数组等。
三、v-model修饰指令
v-model用来在视图与Model之间同步数据，但是有时候我们需要控制同步发生的时机，或者在数据同步到Model之前将数据转换为Number类型。我们可以在v-model指令所在的form控件上添加相应的修饰指令来实现这个需求。
1、lazy
在默认情况下，v-model在input事件中同步输入框的值与数据，可以添加一个lazy特性，从而改到在change事件中去同步。代码示例如下：
{ {msg}} 2.debounce
设置一个最小的延时，在每次敲击之后延时同步输入框的值到Model中。如果每次更新都要进行高耗操作（例如，在输入提示中ajax请求）时，它较为有用。代码示例如下：
用户输入完毕500ms后，vm.msg才会被更新。
注：该指令是用来延迟同步用户输入的数据到Model中，并不会延迟用户输入事件的执行。所以如果要想获取变化后的数据，我们应该用vm.$watch()来监听msg的变化，而不是在事件中获取最新数据。
3.number
当传给后端的字段类型必须是数值的时候，我们可以在v-model所在控件上使用number指令，该指令会在用户输入被同步到Model中时将其转换为数值类型，如果转换结果为NaN，则对应的Model值还是用户输入的原始值。代码示例如下：