Class 與 Style 綁定

在 Vue 3 中，Class 與 Style 綁定 是用來動態設定元素的 CSS 類別（class）和樣式（style）的強大工具。這些綁定功能使我們能夠根據數據狀態來靈活改變視圖的外觀。

1. Class 綁定

Vue 提供了多種方式來綁定元素的 class 屬性，我們可以使用對象語法或數組語法，來根據條件動態添加或移除 CSS 類別。

對象語法

對象語法允許我們根據條件來動態添加或移除 CSS 類別。當對象的某個鍵值對中，值為 true 時，對應的鍵（class 名稱）會被應用到元素上。

<div id="app">
  <p :class="{ active: isActive, disabled: isDisabled }">這是一個段落</p>
  <button @click="toggleState">切換狀態</button>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      isActive: true,
      isDisabled: false
    };
  },
  methods: {
    toggleState() {
      this.isActive = !this.isActive;
      this.isDisabled = !this.isDisabled;
    }
  }
});

app.mount('#app');
</script>

<style>
.active {
  color: green;
}
.disabled {
  text-decoration: line-through;
}
</style>

在這個範例中，當 isActive 為 true 時，active 類會被應用到段落元素中，而 isDisabled 控制 disabled 類的應用。

數組語法

數組語法可以將多個 CSS 類別一起綁定。如果條件為 true，對應的類別就會被應用。

<p :class="[isActive ? 'active' : '', 'highlight']">這是一個段落</p>

在這裡，如果 isActive 為 true，active 類會被應用。同時，highlight 類無條件被應用。

與 Computed 配合

我們可以使用 計算屬性（computed properties） 來更靈活地處理複雜的條件判斷：

<div id="app">
  <p :class="classObject">這是一個段落</p>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      isActive: true,
      isDisabled: false
    };
  },
  computed: {
    classObject() {
      return {
        active: this.isActive,
        disabled: this.isDisabled
      };
    }
  }
});

app.mount('#app');
</script>

2. Style 綁定

Style 綁定 可以通過對象語法或數組語法來動態設置內聯樣式。這讓我們可以根據數據狀態靈活地改變元素的樣式。

對象語法

對象語法允許我們動態設定 CSS 屬性值，鍵是 CSS 的屬性名，值是屬性值。

<div id="app">
  <p :style="{ color: activeColor, fontSize: fontSize + 'px' }">這是一個段落</p>
  <button @click="changeStyle">改變樣式</button>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      activeColor: 'blue',
      fontSize: 14
    };
  },
  methods: {
    changeStyle() {
      this.activeColor = this.activeColor === 'blue' ? 'red' : 'blue';
      this.fontSize += 2;
    }
  }
});

app.mount('#app');
</script>

在這裡，我們根據數據動態設置段落的 color 和 font-size，並通過按鈕來改變樣式。

數組語法

數組語法允許我們應用多組樣式：

<p :style="[baseStyles, additionalStyles]">這是一個段落</p>

<script>
const app = Vue.createApp({
  data() {
    return {
      baseStyles: {
        color: 'blue',
        fontSize: '14px'
      },
      additionalStyles: {
        backgroundColor: 'lightgray'
      }
    };
  }
});

app.mount('#app');
</script>

這樣，我們可以將多個樣式物件合併應用到一個元素上。

自動處理廠商前綴

Vue 會自動處理 CSS 屬性的 廠商前綴（如 -webkit-、-moz-），這樣我們可以放心使用標準屬性名稱，而不用擔心跨瀏覽器兼容性問題。

<p :style="{ transform: 'rotate(30deg)' }">旋轉文本</p>

3. Class 與 Style 綁定的混合使用

我們可以同時使用 :class 和 :style 來綁定 CSS 類別和內聯樣式，根據不同的需求靈活調整元素的樣式。

<div id="app">
  <p :class="{ active: isActive }" :style="{ color: textColor }">這是一個段落</p>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      isActive: true,
      textColor: 'green'
    };
  }
});

app.mount('#app');
</script>

在這個範例中，:class 和 :style 都被應用，根據狀態動態改變元素的類別和樣式。

---

總結

• Class 綁定：通過 :class 來根據條件動態添加或移除 CSS 類別。支持對象語法和數組語法，並且可以和計算屬性配合使用。
• Style 綁定：通過 :style 動態設置內聯樣式。支持對象語法和數組語法，並且自動處理廠商前綴。

這些綁定功能讓我們能夠靈活、簡單地根據數據狀態控制元素的外觀，是 Vue 中非常常用且強大的功能。