1.7　双向数据绑定

本节讲解Vue中比较重要的一个指令—v-model双向数据绑定指令。双向数据绑定的概念如下。

（1）数据层（M层）发生变化会影响视图层（V层）改变。

（2）视图层（V层）发生变化会影响数据层（M层）改变。

下面开始v-model指令的学习。当前有这样一个需求，即把M层中的msg数据渲染到input文本框中，代码如下。

M层代码如下。

先不使用v-model指令，按照以前的写法可以使用v-bind属性绑定的形式，代码如下。

视图层代码如下。

使用v-bind属性绑定的形式，可以把msg数据渲染出来，但是当修改文本框中的内容时，M层数据不会改变，如图1-9所示。

此时将文本框的值修改成“Hello Vue”，但插值表达式渲染出来的仍然是“Hello World”，说明M层的数据并没有随着V层数据的改变而改变，正确的代码如下。

使用v-model代替v-bind，当文本框的值修改成“Hello Vue”时，插值表达式的渲染结果也同时修改成“Hello Vue”，如图1-10所示。

注意：

v-model只能运用到表单元素，只有表单元素是用户可以操作的。

1.7.1　v-model修饰符

v-model还可以添加修饰符，例如数字修饰符“.number”，表示用户只能输入数字，代码如下。

M层代码如下。

视图层代码如下。

常用的修饰符还有过滤首尾空格“.trim”，代码如下。

视图层代码如下。

本节最后一个知识点是.lazy修饰符的使用，其表示内容发生变化，并且在失去焦点时触发，代码如下。

当文本框的值发生变化时，插值表达式的渲染结果并不会立即改变，而是要等到文本框失去焦点后才改变，如图1-11所示。

1.7.2　使用v-model实现计算器案例

本节使用v-model实现简单的计算器功能，代码如下。

视图层代码如下。

运行代码，计算器效果如图1-12所示。

M层代码如下。

代码解析如下。

（1）视图层v-model定义的属性值必须在M层的data中定义，否则程序报错。

（2）btn方法在methods中定义。

（3）要点：btn方法中用到了data中的数据，如num1、num2、res，需要注意的是，在methods中调用data中的数据，必须要加this。

this表示当前的vm实例，在控制台中console.log(vm)打印的实例对象如图1-13所示。

打印vm实例对象发现，btn方法和num1、num2等属于平级关系，所以在btn方法中使用num1、num2时，需要使用this.num1、this.num2。