vue動態綁定class的幾種方式

vue動態綁定class的最常用幾種方式：

該文章轉載於  https://www.cnblogs.com/lwming/p/10925318.html

 

 第一種：（最簡單的綁定）

1.綁定單個class

 html部分：

 <div :class="{'active':isActive}"></div>

 js部分：判斷是否綁定一個active

data() {
    return {
      isActive: true
    };
  }

結果渲染為：

<div class="active"></div>

 

2.若要綁定多個class，需要逗號隔開就行：（這里的activeTwo加不加引號都可以，也一樣都能渲染，如下）

 <div class="activeOne" v-bind:class="{ activeTwo: isActive, 'activeThree': hasError }"></div>

js部分：判斷是否綁定對應class

  data() {
    return {
      isActive: true,
      hasError: true
    };
  }

結果渲染為：

<div class="activeOne activeTwo activeThree"></div>

 

第二種：（綁定的數據對象）

<div :class="classObject"></div>

data: {
  classObject: {
    active: true,
  }
}

 

第三種：（綁定一個返回對象的計算屬性）

<div :class="classObject"></div>

export default {
  data() {
    return {
    isActive: true,
    };
  },
  computed: {
  classObject: function () {
    return {
      active: this.isActive,
    }
  }
}

結果渲染為：

<div class="active"></div>

 

第四種：（單純數組方法）

<div :class="[activeClass, errorClass]"></div>

 data() {
    return {
      activeClass: "active",
      errorClass: "disActive"
    };
  },

結果渲染為：

<div class="active disActive"></div>

 

第五種：（數組與三元運算符結合判斷選擇需要的class）

<div :class="[isActive?'active':'disActive']"></div>

 data() {
    return {
      isActive: false,
    };
  },

結果渲染為：

<div class="disActive"></div>

 

 

以上

或者參考vue官方文檔 https://cn.vuejs.org/v2/guide/class-and-style.html