4.2 插值
应用程序实例创建完成后，就需要通过插值进行数据绑定。插值的方式有以下3种。
1．文本插值
数据绑定最常见的形式就是使用Mustache语法（双大括号）的文本插值：
Mustache标签将会被替代为对应数据对象上message属性的值。无论何时，绑定的数据对象上message属性发生了改变，插值处的内容都会更新。
通过使用v-once指令，也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但这会影响到该节点上的其他数据绑定：
在浏览器中运行程序4.1.html，按F12键打开控制台并切换到“Elements”选项，可以查看渲染的结果，如图4-2所示。
图4-2 渲染文本
2．原始HTML
Mustache语法会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，需要使用v-html指令。
注意
不能使用v-html来复合局部模板，因为Vue不是基于字符串的模板引擎。反之，对于用户界面（UI），组件更适合作为可重用和可组合的基本单位。
例如，想要输出一个a标签，首先需要在data属性中定义该标签，然后根据需要定义href属性值和标签内容，最后使用v-html绑定到对应的元素上。
【例4.2】输出真正的HTML（源代码\ch04\4.2.html）。
在浏览器中运行程序，按F12键打开控制台并切换到“Elements”选项，可以发现使用v-html指令的p标签输出了真正的a标签，当单击“百度”后，页面将跳转到对应的页面，效果如图4-3所示。
图4-3 输出真正的HTML
从结果可知，Mustache语法不能作用在HTML特性上，如果需要控制某个元素的属性，可以使用v-bind指令。
注意
站点上动态渲染的任意HTML可能会非常危险，因为它很容易导致XSS攻击。请只对可信内容使用HTML插值，绝不要对用户提供的内容使用插值。
3．使用JavaScript表达式
在模板中，一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持。
上面这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
【例4.3】使用JavaScript表达式（源代码\ch04\4.3.html）。
在浏览器中运行程序，结果如图4-4所示。
图4-4 使用JavaScript表达式