vue关于动态绑定class的那些事

今天在写vue弹窗组件时，需要弹窗出来时不能点击除了弹窗之外的组件，需要用到css属性 pointer-events:none;这就需要我们动态的添加class，vue中尽量不要用js来添加class属性，会导致有时候页面刷新不出来，所以就在这整理了vue常见的几种动态的添加class的方法

vue动态绑定class的方式

一、绑定单个class

html部分：

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

js部分：通过isActive来判断是否添加active

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

二、绑定多个class，需要逗号隔开

html部分：

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

js部分：判断是否绑定对应class

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

三、绑定一个返回对象的计算属性

html部分：

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

js部分:通过计算属性返回值来判断

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

四、通过三元运算符来选择需要的class

html部分:

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

js部分：

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