2.5 表单输入绑定
2.5.1 双向绑定
MVVM模式最重要的一个特性就是双向绑定，而Vue作为一个MVVM框架，也实现了数据的双向绑定。在Vue中使用内置的v-model指令完成数据在View与Model间的双向绑定。
v-model会忽略所有表单元素的value、checked、selected attribute的初始值而将Vue实例的数据作为数据来源，因此应该通过JavaScript在组件的data选项中声明初始值。
2.5.2 v-model基本用法
当v-model使用在不同的表单元素上时，保存值的类型也是不同的，常见的表单元素数据绑定操作如下。
1．文本输入框
index.html文件代码如下：
在浏览器中运行的效果如图2.41所示。
图2.41 绑定文本输入框
2．文本域
index.html文件代码如下：
在浏览器中运行的效果如图2.42所示。
图2.42 绑定文本域
3．复选框
index.html文件代码如下：
在浏览器中运行的效果如图2.43所示。
图2.43 绑定复选框
4．单选按钮
index.html文件代码如下：
在浏览器中运行的效果如图2.44所示。
图2.44 绑定单选按钮
5．下拉选择框
index.html文件代码如下：
在浏览器中运行的效果如图2.45所示。
图2.45 绑定下拉选择框
2.5.3 修饰符
对于v-model指令，有3种常用的修饰符。
· lazy
· number
· trim
1．lazy修饰符
在输入框中，v-model默认为同步数据，使用lazy修饰符后会转变为在change事件中同步，即当输入框失去焦点时数据才会更新。
index.html文件代码如下：
在浏览器中运行，当输入内容时不会同步更新，如图2.46所示。当输入框失去焦点时，数据才会被更新，如图2.47所示。
图2.46 输入数据
图2.47 失去焦点时才更新数据
2．number修饰符
输入框默认输入的值为String类型，使用number修饰符可以将输入的值转化为Number类型，该修饰符经常使用在数字输入框中。
index.html文件代码如下：
在浏览器中运行，输入框的默认值为String类型，如图2.48所示。当输入数字时，值的类型会被转化为Number类型，如图2.49所示。
图2.48 输入框的默认值类型
图2.49 值的类型被转化为Number类型
3．trim修饰符
如果要自动过滤用户输入内容的首尾空格，可以给v-model添加trim修饰符。
index.html文件代码如下：
在浏览器中运行的效果如图2.50所示。
图2.50 trim修饰符效果