v-bind:class詳解

一、基礎語法

v-bind:class指令可以根據表達式的值動態切換一個或多個class。當值為字元串時，將該字元串作為class名稱。如果值為一個對象，可以根據對象的屬性是否為真值來判斷該class是否生效。還可以配合三元表達式，將布爾類型的變數轉換為class名稱。

  
    // 字元串
    <div v-bind:class="'class1 class2'"></div>

    // 對象
    <div v-bind:class="{ class1: true, class2: false }"></div>

    // 三元表達式
    <div v-bind:class="{ 'class1': isTrue, 'class2': isFalse }"></div>
  

二、多個class的綁定

可以使用數組的方式給一個元素綁定多個class，這個數組的每個元素可以是一個字元串，也可以是一個對象。

  
    // 字元串數組
    <div v-bind:class="['class1', 'class2']"></div>

    // 對象數組
    <div v-bind:class="[{ class1: true }, { class2: false }]"></div>

    // 字元串和對象混合數組
    <div v-bind:class="['class1', { class2: true, class3: false }]"></div>
  

三、動態class名稱

使用v-bind:class指令，可以在運行時動態地綁定class名稱。如果綁定的class名稱需要根據某個變數的值來改變，可以使用計算屬性或者方法實現。

  
    <template>
      <div v-bind:class="computedClass"></div>
    </template>

    <script>
      export default {
        data() {
          return {
            isActive: true
          }
        },
        computed: {
          computedClass() {
            return this.isActive ? 'active' : 'inactive'
          }
        }
      }
    </script>
  

四、動態class綁定的可選項

v-bind:class指令還有幾個可選項可以讓class綁定更加靈活。

1. class綁定前綴和後綴

  
    <div v-bind:class="['prefix-' + class1, class2 + '-suffix']"></div>
  

2. class綁定條件判斷

  
    <div v-bind:class="{'class1': isClass1, 'class2': isClass2}"></div>
  

3. class綁定多個屬性

  
    <div v-bind:class="{'class1 class2': isClass1, 'class3': isClass2}"></div>
  

4. 在組件上使用class綁定，可以通過props傳遞參數

  
    <template>
      <div v-bind:class="computedClass"></div>
    </template>

    <script>
      export default {
        props: {
          isActive: {
            type: Boolean,
            default: false
          }
        },
        computed: {
          computedClass() {
            return this.isActive ? 'active' : 'inactive'
          }
        }
      }
    </script>
  

五、總結

v-bind:class指令是Vue.js中一個非常實用的指令，可以讓我們更加靈活地管理和切換元素的class。無論是綁定靜態還是動態class名稱，還是使用可選項進行靈活綁定，都可以通過v-bind:class指令輕鬆實現。熟練掌握這個指令，對於Vue.js的開發工作也會更加得心應手。