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所示。
图1-9 h1标签渲染结果1
此时将文本框的值修改成“Hello Vue”，但插值表达式渲染出来的仍然是“Hello World”，说明M层的数据并没有随着V层数据的改变而改变，正确的代码如下。
使用v-model代替v-bind，当文本框的值修改成“Hello Vue”时，插值表达式的渲染结果也同时修改成“Hello Vue”，如图1-10所示。
图1-10 h1标签渲染结果2
注意：
v-model只能运用到表单元素，只有表单元素是用户可以操作的。
1.7.1 v-model修饰符
v-model还可以添加修饰符，例如数字修饰符“.number”，表示用户只能输入数字，代码如下。
M层代码如下。
视图层代码如下。
常用的修饰符还有过滤首尾空格“.trim”，代码如下。
视图层代码如下。
本节最后一个知识点是.lazy修饰符的使用，其表示内容发生变化，并且在失去焦点时触发，代码如下。
当文本框的值发生变化时，插值表达式的渲染结果并不会立即改变，而是要等到文本框失去焦点后才改变，如图1-11所示。
图1-11 插值表达式渲染结果
1.7.2 使用v-model实现计算器案例
本节使用v-model实现简单的计算器功能，代码如下。
视图层代码如下。
运行代码，计算器效果如图1-12所示。
图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所示。
图1-13 打印vm实例对象
打印vm实例对象发现，btn方法和num1、num2等属于平级关系，所以在btn方法中使用num1、num2时，需要使用this.num1、this.num2。