文本

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

<span>Message: {{ msg }}</span>

通过v-once指令能执行一次性的插值，当数据改变时，插值处的内容不会更新。

<span v-once>这个将不会改变: {{ msg }}</span>

原始HTML

双大括号将数据解释为普通文本，而非HTML代码，如果需要输出真正的HTML，则需要使用v-html指令：

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

在上面例子中，span的内容会被替换为属性值rawHtml，直接作为HTML。但是，不能使用v-html复合局部模板，因为Vue并不是基于字符串的模板引擎。

在站点上动态渲染的任意HTML都可能会非常危险，因为它容易导致XSS攻击，因此，请只对可信内容使用HTML插值。

特性

Mustache语法不能作用在HTML特性上，遇到这种情况应该使用v-bind指令

<div v-bind:id="dynamicId"></div>

在布尔特性的情况下，v-bind工作略有不同

<button v-bind:disabled="isButtonDisabled">Button</button>

如果isButtonDisabled的值是null、undefined、false，则disabled属性甚至不会被包含在<button>元素中。

使用JavaScript表达式

对于所有的数据绑定，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 } }}

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如Math和Date。

不应该在模板表达式中试图访问用户定义的全局变量。

插值

results matching ""