摘要

v-bind 指令（常用其縮寫 :）專門用於將 HTML 元素的屬性值與資料進行響應式綁定，最強大的應用在於動態控制 class 與 style。

定義與說明

v-bind 可以將任何 HTML 屬性（如 href, src, disabled）的值與一個 JavaScript 表達式進行綁定。當應用在 class 和 style 上時，它支援更強大的物件和陣列語法，以實現複雜的動態樣式。

實作範例

Vue SFC

<script setup>
import { ref } from 'vue';
const isActive = ref(true);
const activeColor = ref('red');
</script>

<template>
  <!-- 動態綁定 class -->
  <div :class="{ active: isActive }">這是一個區塊</div>

  <!-- 動態綁定 style -->
  <p :style="{ color: activeColor, fontSize: '16px' }">這是一段文字</p>
</template>

結論

: 屬性綁定將 Vue 的響應式能力從文字內容擴展到了元素的屬性上。其對 class 和 style 的增強支持，是實現豐富動態介面的關鍵。

v-bind 屬性綁定動態樣式