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．文本域

index.html文件代码如下：

在浏览器中运行的效果如图2.42所示。

3．复选框

index.html文件代码如下：

在浏览器中运行的效果如图2.43所示。

4．单选按钮

index.html文件代码如下：

在浏览器中运行的效果如图2.44所示。

5．下拉选择框

index.html文件代码如下：

在浏览器中运行的效果如图2.45所示。

2.5.3　修饰符

对于v-model指令，有3种常用的修饰符。

·　lazy

·　number

·　trim

1．lazy修饰符

在输入框中，v-model默认为同步数据，使用lazy修饰符后会转变为在change事件中同步，即当输入框失去焦点时数据才会更新。

index.html文件代码如下：

在浏览器中运行，当输入内容时不会同步更新，如图2.46所示。当输入框失去焦点时，数据才会被更新，如图2.47所示。

2．number修饰符

输入框默认输入的值为String类型，使用number修饰符可以将输入的值转化为Number类型，该修饰符经常使用在数字输入框中。

index.html文件代码如下：

在浏览器中运行，输入框的默认值为String类型，如图2.48所示。当输入数字时，值的类型会被转化为Number类型，如图2.49所示。

3．trim修饰符

如果要自动过滤用户输入内容的首尾空格，可以给v-model添加trim修饰符。

index.html文件代码如下：

在浏览器中运行的效果如图2.50所示。