技術標籤：Vuevuevue.js前端

目錄

• 一、插值
• • 1.文字
  • 2.原始HTML
  • 3.Attribute
  • 4.使用 JavaScript 表示式

一、插值

1.文字

資料繫結最常見的形式就是使用“Mustache”語法 (雙大括號) 的文字插值：

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

Mustache 標籤將會被替代為對應資料物件上 msg property 的值。無論何時，繫結的資料物件上 msg property 發生了改變，插值處的內容都會更新。

通過使用 v-once 指令，也能執行一次性地插值，當資料改變時，插值處的內容不會更新。但會影響到該節點上的其它資料繫結：

<span v-once>這個將不會改變: {{ msg }}</span>

2.原始HTML

雙大括號會將資料解釋為普通文字，而非 HTML 程式碼。為了輸出真正的 HTML，需要使用 v-html 指令：

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

這個 span 的內容將會被替換成為 property 值 rawHtml，直接作為 HTML——會忽略解析 property 值中的資料繫結。注意，不能使用 v-html 來複合局部模板，因為 Vue 不是基於字串的模板引擎。反之，對於使用者介面 (UI)，元件更適合作為可重用和可組合的基本單位。

注意：
站點上動態渲染的任意 HTML 可能會非常危險，因為它很容易導致 XSS 攻擊。請只對可信內容使用 HTML 插值，絕不要對使用者提供的內容使用插值。

3.Attribute

Mustache 語法不能作用在 HTML attribute 上，遇到這種情況應該使用 v-bind 指令 ：

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

對於布林 attribute (只要存在就意味著值為 true)，v-bind 工作起來略有不同，在這個例子中：

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

如果 isButtonDisabled 的值是 null、undefined 或 false，則 disabled attribute 甚至不會被包含在渲染出來的 元素中。

4.使用 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 。不應該在模板表示式中試圖訪問使用者定義的全域性變數。