建立 2026-09-15 更新 2026-09-15

指令

指令（Directive）是樣板上以 v- 開頭的特殊屬性，用來把資料接到 DOM 行為。最常用的幾個就涵蓋大部分畫面。官方：Template Syntax、Conditional Rendering、List Rendering。

條件：`v-if` 與 `v-show`

<p v-if="error">{{ error }}</p>
<p v-else-if="loading">載入中…</p>
<p v-else>完成</p>

<div v-show="isOpen">抽屜內容</div>

v-if 為 false 時不會渲染該節點（連同裡面的元件一併卸載）。v-show 只切 display: none，適合頻繁開關。v-else / v-else-if 必須緊接在 v-if 後面。

<li v-for="item in items" :key="item.id">
  {{ item.name }}
</li>

:key 必須穩定且唯一，讓 Vue 能對上「同一個項目」而不是只靠位置。不要用 index 當 key（除非清單不會重排、插入、刪除）。

也可解構：v-for="(item, index) in items"。物件則是 v-for="(value, key) in object"。

v-if 與 v-for 不要寫在同一個元素上。要過濾清單，先用 computed 算出陣列，再 v-for。

物件與陣列都能綁：

<div :class="{ active: isActive, disabled: isDisabled }"></div>
<div :style="{ color: textColor, fontSize: size + 'px' }"></div>

靜態 class 可與動態並存：<div class="btn" :class="extra">。

v-bind、v-on、v-model 見樣板語法。自訂指令較少用，等核心熟了再查 Custom Directives。