跳至主要内容

Template Syntax Binding

vue 3.4

Mustache 語法​

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

<span>{{ isTrue ? 'Yes' : 'No' }}</span>

<span>{{  count + 1 }}</span>

v- 指令​

  • template 中出現的以 v- 為前綴的屬性稱為 v 指令
  • 由 Vue 提供的特殊屬性
  • 會被 vue 渲染為具 reactive 特性的 DOM 程式
<span v-html="rawHtml"></span>

v-html 脫逸指令​

  • 類似 Escape Model String
  • vue 變數值預設會以純文字型態在前端呈現，不做脫逸
  • 若希望將 vue 變數值視為 HTML 內容在前端選染則需使用 v-html 指令
  • 假設 rawHtml="<span style="color: red">"
<p>Using text interpolation: {{ rawHtml }}</p>
角括號不進行脫逸，忠實呈現

<p>Using v-html directive: <span v-html="rawHtml"></span></p>
rawHtml 被視為 &lt;span style="color: red"&gt; 在前端渲染

v-bind 動態綁定指令​

v-bind:attr 單一屬性綁定​

  • Vue 下若想為 HTML element 動態綁定屬性則需使用 v-bind 指令
  • 由 vue 管理屬性專用語法須採用 v-bind 指令
  • 若要動態移除指定屬性，則直接將屬性設為 null 或 undefined 即可。
  • Shorthand: 可直接簡寫為   :attr  
  • Same-name Shorthand: 若 HTML element 屬性名 與 vue 變數名 相同則可再簡化
<div v-bind:id="dynamicId"></div>

<div :id="dynamicId"></div>

<!-- same as :id="id" -->
<div :id></div>

Element 動態綁定布林型別屬性​

  • v-bind:disabled, v-bind:hidden
  • 若 vue 動態綁定的 HTML element 屬性特性為 boolean，則有特殊渲染規則
  • 基本上若參數值是布林值，基本上沒問題。
  • 但 JS 下零與非零、字串與空字串也可被指派給布林變數，此時作用似乎會依屬性不同而有不同現象。可自行在 SFC playground 下測試
<button :disabled="isButtonDisabled">Button</button>
<span :hidden="isMsgHidden">Peek A Boo</span>

v-bind 動態綁定多個屬性​

  • 可以同時將多個屬性放在 JavaScript 物件中，統一指派給 template
const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}

<div v-bind="objectOfAttrs"></div>