4.2　插值

应用程序实例创建完成后，就需要通过插值进行数据绑定。插值的方式有以下3种。

1．文本插值

数据绑定最常见的形式就是使用Mustache语法（双大括号）的文本插值：

Mustache标签将会被替代为对应数据对象上message属性的值。无论何时，绑定的数据对象上message属性发生了改变，插值处的内容都会更新。

通过使用v-once指令，也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但这会影响到该节点上的其他数据绑定：

在浏览器中运行程序4.1.html，按F12键打开控制台并切换到“Elements”选项，可以查看渲染的结果，如图4-2所示。

2．原始HTML

Mustache语法会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，需要使用v-html指令。

例如，想要输出一个a标签，首先需要在data属性中定义该标签，然后根据需要定义href属性值和标签内容，最后使用v-html绑定到对应的元素上。

【例4.2】输出真正的HTML（源代码\ch04\4.2.html）。

在浏览器中运行程序，按F12键打开控制台并切换到“Elements”选项，可以发现使用v-html指令的p标签输出了真正的a标签，当单击“百度”后，页面将跳转到对应的页面，效果如图4-3所示。

从结果可知，Mustache语法不能作用在HTML特性上，如果需要控制某个元素的属性，可以使用v-bind指令。

3．使用JavaScript表达式

在模板中，一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持。

上面这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

【例4.3】使用JavaScript表达式（源代码\ch04\4.3.html）。

在浏览器中运行程序，结果如图4-4所示。