class 樣式綁定

在 Vue 中，可以通過 :class（或簡寫 v-bind:class）實現類名（class）樣式的綁定。Vue 提供了幾種常用的綁定方式，分別支持字符串、對象和數組語法。

綁定字符串

<div :class="'active'"></div>

等價于：

<div class="active"></div>

綁定對象

<div :class="{ active: isActive, 'text-danger': hasError }"></div>

• 當 isActive 為 true 時，添加類名 active；
• 當 hasError 為 true 時，添加類名 text-danger。

綁定數組

<div :class="[activeClass, errorClass]"></div>

• activeClass 和 errorClass 是組件中的數據或計算屬性，如：

data() {return {activeClass: 'active',errorClass: 'text-danger'}
}

混合使用

<div :class="['base-class', { active: isActive, 'text-danger': hasError }]"></div>

示例組件

<template><div :class="['box', { active: isActive }]">Hello</div>
</template><script>
export default {data() {return {isActive: true}}
}
</script><style>
.box { padding: 10px; }
.active { background-color: yellow; }
</style>

再理解class綁定

好的，我們來深入理解 Vue 的 class 樣式綁定機制，包括它的底層原理、動態性、響應式特點，以及實際開發中的高級用法。

? Vue :class 的本質

:class 是 v-bind:class 的簡寫。它的本質是把綁定值“最終轉換為字符串類名”，然后動態地應用到 DOM 元素上。

Vue 會根據你傳入的數據類型，做不同的處理邏輯：

字符串（String）

<div :class="'foo bar'"></div>

Vue 不做處理，直接將字符串 foo bar 設置為 class 屬性值。

對象（Object）

<div :class="{ active: isActive, 'text-danger': hasError }"></div>

底層行為：

• Vue 遍歷對象的每一個 key。
• 如果 key 對應的值為 true，則保留這個類名；否則忽略。
• 最終拼接為字符串。

這是最常見的形式，便于響應式控制類名的添加和移除。

數組（Array）

<div :class="[activeClass, errorClass]"></div>

底層行為：

• Vue 會遞歸解析數組中的每一項：
• 如果是字符串：直接添加。
• 如果是對象：按對象處理方式處理。
• 如果是數組：繼續遞歸。

適合動態組合多個類，甚至做復雜的條件判斷。

? 響應式原理解析

當綁定的值（如 isActive、activeClass 等）發生變化時，Vue 會自動重新渲染這個節點的 class，因為這些數據是響應式的。Vue 使用了依賴收集和偵聽機制（基于 Proxy 或 Object.defineProperty）確保：

• 數據改變
• class 自動更新
• DOM 自動同步

? 復雜示例：結合計算屬性

<template><div :class="classObject">按鈕</div>
</template><script>
export default {data() {return {isPrimary: true,isDisabled: false}},computed: {classObject() {return {'btn': true,'btn-primary': this.isPrimary,'btn-disabled': this.isDisabled}}}
}
</script>

優勢：邏輯集中在 computed 中，模板更清晰，適合大型項目。

? 實用場景技巧

動態類名前綴

<div :class="`theme-${theme}`"></div>

當 theme = ‘dark’，結果是 class=“theme-dark”。

在組件上綁定類

<MyComponent :class="{ 'highlight': isHighlighted }" />

**注意：**組件必須將類名通過 $attrs 或 inheritAttrs: false 顯式傳遞到內部元素，否則類名不會自動生效。

使用 Tailwind / 原子化 CSS 框架時

你可以靈活使用 :class 和字符串拼接動態控制 Utility 類。

<div :class="['px-4', `text-${textSize}`]"></div>

🔍 小結

類型	適合場景	Vue處理方式
字符串	靜態或直接拼接的類名	直接使用
對象	通過條件動態啟用/禁用類	key-value判斷
數組	多個類組合、嵌套判斷復雜	遞歸展開、合并類名