2025-04-07-Vue 裡， 綁定可以同時支援 **物件語法** 和 **陣列語法**

發表於 更新於 分類於 閱讀次數：
2025-04-07-Vue 裡， 綁定可以同時支援 **物件語法** 和 **陣列語法**

2025-04-07-Vue 裡， 綁定可以同時支援 物件語法 和 陣列語法

很好 👌 你已經抓到重點了！
在 Vue 裡，:class 綁定可以同時支援 物件語法 和 陣列語法。

你現在的寫法是 物件語法：

1
2
3
4
<div
  class="my-banner"
  :class="{ rounded: rounded }"
>

這表示：

  • 一定會有 my-banner class
  • 如果 rounded = true → 會再加上 rounded class

1️⃣ 加入 type 的方式（陣列語法）

最簡單的方式是把 type 當成一個 class，寫成陣列：

1
2
3
4
<div
  class="my-banner"
  :class="[type, { rounded: rounded }]"
>

這樣結果會是：

  • type="error" rounded=false → class="my-banner error"
  • type="success" rounded=true → class="my-banner success rounded"

2️⃣ 保險一點：加上前綴

有時候我們會想避免跟其他 class 撞名，可以這樣寫：

1
2
3
4
<div
  class="my-banner"
  :class="[`type-${type}`, { rounded }]"
>

結果會是：

  • type="error" → class="my-banner type-error"
  • type="info" rounded=true → class="my-banner type-info rounded"

3️⃣ 結合驗證（防呆）

在 props 裡定義 type：

1
2
3
4
5
6
7
8
9
10
11
12
13
<script setup>
defineProps({
  type: {
    type: String,
    default: 'info',
    validator: (val) => ['error','warning','success','info'].includes(val)
  },
  rounded: {
    type: Boolean,
    default: false
  }
})
</script>

這樣 MyBanner 會更健壯，不會被亂傳值。

👉 總結：
你只要改成這樣，就能同時支援 type 和 rounded：

1
2
3
4
<div
  class="my-banner"
  :class="[type, { rounded }]"
>