Vue 3 核心教學：掌握動態 class 的條件控制與最佳實踐

在現代前端開發中，網頁畫面的互動性往往取決於資料狀態的改變。例如：使用者點擊按鈕時切換選取狀態、表單驗證失敗時標記紅色邊框或是側邊欄的展開與收合。

在 Vue 3 中，這類依賴資料狀態的樣式切換，最優雅的解決方案就是透過 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 }]" 是最靈活的萬用解法。