下载掌阅APP，畅读海量书库
立即打开
应用程序实例创建完成后，就需要通过插值进行数据绑定。本节介绍插值的3种方式。
数据绑定最常见的形式就是使用Mustache语法（双花括号）的文本插值：
<span>Message: {{ message}}</span>
Mustache标签将会被替代为对应数据对象上message属性的值。无论何时，绑定的数据对象上的message属性发生了改变，插值处的内容都会更新。
【例2.1】 文本插值（源代码\ch02\2.1.html）。
在Chrome浏览器中运行程序2.1.html，按F12键打开控制台并切换到Elements选项卡，可以查看渲染的结果，如图2-1所示。
图2-1 渲染文本
Mustache语法会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，需要使用v-html指令。
不能使用v-html来复合局部模板，因为Vue不是基于字符串的模板引擎。反之，对于用户界面（User Interface，UI），组件更适合作为可重用和可组合的基本单位。
例如，想要输出一个a标签，首先需要在data属性中定义该标签，然后根据需要定义href属性值和标签内容，最后使用v-html绑定到对应的元素上。
【例2.2】 输出真正的HTML（源代码\ch02\2.2.html）。
在Chrome浏览器中运行程序，按F12键打开控制台并切换到Elements选项卡，可以发现使用v-html指令的p标签输出了真正的a标签，当单击“百度”后，将跳转到对应的页面，效果如图2-2所示。
图2-2 输出真正的HTML
从结果可知，Mustache语法不能作用在HTML特性上，如果需要控制某个元素的属性，则可以使用v-bind指令。
站点上动态渲染任意HTML可能会非常危险，因为它很容易导致XSS攻击。请只对可信内容使用HTML插值，绝不要对用户提供的内容使用插值。
在模板中，一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('')}}
<div v-bind:id="'list-' + id"></div>
上面这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
<!-- 这是语句，不是表达式 -->
{{ var a = 1}}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
【例2.3】 使用JavaScript表达式（源代码\ch02\2.3.html）。
在Chrome浏览器中运行程序，结果如图2-3所示。
图2-3 使用JavaScript表达式