vue动态绑定class的最常用几种方式：

对象方法

第一种：简单的绑定方法

1.绑定单个class
效果图：

image.png

html部分：

按钮

css部分(按钮的基础样式)：

.btn {
  display: inline-block;
  font-weight: 400;
  font-size: 14px;
  height: 32px;
  padding: 0 15px;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  line-height: 30px;
}
.active {
  cursor: pointer;
  color: #fff;
  border-color: #1890ff;
  background-color: #1890ff;
}

js部分，判断是否绑定一个active：

  data() {
    return {
      isActive: true
    }
  }

渲染的结果为：

按钮

2.vue绑定多个动态class的方法

效果图：

image.jpeg

html代码部分：

css部分：

.red {
  display: inline-block;
  background: red;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  font-size: 12px;
}

.orange {
  display: inline-block;
  background: #ee8114;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.yellow {
  display: inline-block;
  background: #ffba00;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

第二种：绑定数据对象（就是把v-bing:class绑定的内容放在一个对象里面）

效果图：

image.png

html代码部分：

按钮

js部分：

data() {
    return {
      classObj: {
        active: true
      }
    }
  }

渲染的结果：

按钮

第三种：绑定一个返回的computed属性

image.png

html代码部分：

    
按钮

js部分：

 data() {
    return {
      isActive: true
    }
  },
  computed: {
    classObj: function() {
      return {
        active: this.isActive
      }
    }
  }

渲染的结果：

按钮

数组方法

第一种：单纯数组

效果图：

image.png

html代码部分：

按钮

js部分：

data() {
    return {
      isActive: 'active'
    }
  }

渲染的结果为：

按钮

第二种：数组和对象的结合

效果图：

image.png

html代码部分：

按钮

js部分：

 data() {
    return {
      isActive: true,
      basicCss: 'btn'
    }
  }

渲染的效果为：

 
按钮

第三种：数组与三元运算符结合判断选择需要的class

效果图：

image.png

html代码：

按钮

js代码

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

渲染的结果：

按钮

注意：v-bind:class指令也可以与普通的class attribute共存