Vue 3 核心教學：掌握動態 class 的條件控制與最佳實踐
在現代前端開發中，網頁畫面的互動性往往取決於資料狀態的改變。例如：使用者點擊按鈕時切換選取狀態、表單驗證失敗時標記紅色邊框或是側邊欄的展開與收合。
在 Vue 3 中，這類依賴資料狀態的樣式切換，最優雅的解決方案就是透過 v-bind 的 v-bind:class，縮寫為 :class。本文將帶您全面拆解 Vue 3 動態 class 的操作語法、進階技巧與實務開發上的效能心法。
動態 class 的核心語法：物件與陣列
原生 HTML 的 class 只能接收靜態字串，而 Vue 3 的 :class 則允許我們傳入 JavaScript 物件或陣列，甚至能與原生靜態 class 完美並存。
物件語法
物件語法是實務上最常使用的模式。它的核心邏輯是：{ 'className': 布林值 }。當布林值為 true 時，該 class 就會被加上去；反之則會被移除。
- Key（屬性）：您想套用的 CSS
class名稱。 - Value（值）：判斷是否套用的條件。可以是響應式變數、運算式或計算屬性。
const isActive = ref(true);
const hasError = ref(false);<div
class="base-button"
:class="{ 'active': isActive, 'text-danger': hasError }"
>
按鈕文字
</div>陣列語法
當您需要同時套用多個 class，或者需要根據不同條件組合不同的樣式類別時，陣列語法非常實用。您可以在陣列中放入字串、三元運算子，甚至是物件。
<div :class="[activeClass, errorClass]">基礎陣列綁定</div>
<div :class="[isUrgent ? 'flash-red' : '', 'normal-box']">三元運算子判斷</div>
<div :class="[{ 'theme-dark': isUrgent }, 'global-layout']">陣列內嵌物件</div>實務進階：用 computed（計算屬性）保持模板乾淨
當您的條件判斷邏輯變得複雜，例如：同時需要判斷權限、是否登入、是否點擊、以及目前的佈局模式），如果直接把這一大串邏輯寫在 HTML 模板裡，會大幅降低程式碼的可讀性，這在團隊協作中是大忌。
最佳實踐
只要 :class 的物件或陣列中包含了一層以上的邏輯判斷，強烈建議將其抽離至 computed（計算屬性） 中。
const isLogin = ref(true);
const isAdmin = ref(false);
const isSidebarOpen = ref(true);
// 將複雜的樣式邏輯封裝在 computed 中
const sidebarClasses = computed(() => {
return {
'sidebar-expanded': isSidebarOpen.value,
'sidebar-collapsed': !isSidebarOpen.value,
'admin-theme': isLogin.value && isAdmin.value,
'guest-mode': !isLogin.value,
};
});<aside :class="sidebarClasses">後台導覽列</aside>總結：動態 class 控制的核心
快速複習一下 Vue 3 動態類別（:class）的秘訣：
- 狀態切換用：只要是開關、狀態、主題的變更，一律優先使用
:class。 - 簡單用物件，複雜用 computed：1~2 個簡單狀態直接在
<template>寫{ active: isActive }；超過 3 個或是有組合條件，請務必抽離到 computed。 - 善用陣列包物件：需要同時套用 固定樣式 與 多重動態狀態時，
:class="['static-class', { dynamic: isTrue }]"是最靈活的萬用解法。
常見問題
:class 會覆蓋原本的靜態 class 嗎？
不會。Vue 會把靜態的 class 屬性與 :class 綁定的結果合併，因此基礎樣式寫在 class、狀態樣式寫在 :class 是常見做法。
物件語法與陣列語法怎麼選？
依條件開關單一 class 用物件語法；要一次套用多個 class，或混合固定樣式與動態狀態時用陣列語法，陣列裡還能再嵌入物件。
class 名稱有連字號時要怎麼寫？
物件的鍵名含連字號時要加引號，例如：{ 'text-danger': hasError }，否則會是不合法的物件鍵名。
什麼時候該把 :class 抽到 computed？
只要判斷條件超過兩三個，或出現組合式判斷，就建議抽到 計算屬性。模板只留下一個變數名稱，可讀性與可測試性都會明顯提升。
class 名稱本身可以是變數嗎？
可以。在陣列語法中直接放入變數即可，例如：:class="[themeClass]"；若要用變數當物件的鍵名，需要寫成計算屬性回傳的物件。
在元件上使用 :class 會綁到哪裡？
單一根節點的元件會自動把 class 繼承到根元素上；多根節點元件則需要用 :class="$attrs.class" 明確指定要套用到哪一個元素。
