对象方法

第一种：简单的绑定方法

1.绑定单个class
效果图：

image.png
html部分：

<div class="btn" :class="{ active: isActive }">按钮</div>

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
    }
  }

渲染的结果为：

<div class="btn active">按钮</div>

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

效果图：

image.jpeg

html代码部分：

<template slot-scope="scope">
                  <span
                    style=" font-weight: bold;"
                    :class="{
                      red: scope.row.rank === 1,
                      orange: scope.row.rank == 2,
                      yellow: scope.row.rank == 3
                    }"
                    >{{ scope.row.rank }}</span>
</template>

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代码部分：

<div class="btn" :class="classObj">按钮</div>

js部分：

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

渲染的结果：

<div class="btn active">按钮</div>

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

image.png

html代码部分：

    <div class="btn" :class="classObj">按钮</div>

js部分：

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

渲染的结果：

<div class="btn active">按钮</div>

数组方法

第一种：单纯数组

效果图：

image.png

html代码部分：

<div class="btn" :class="[isActive]">按钮</div>

js部分：

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

渲染的结果为：

<div class="btn active">按钮</div>

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

效果图：

image.png

html代码部分：

<div :class="[{ active: isActive }, basicCss]">按钮</div>

js部分：

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

渲染的效果为：

 <div class="active btn">按钮</div>

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

效果图：

image.png

html代码：

<div class="btn" :class="[isActive ? 'active' : 'sort']">按钮</div>

js代码

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

渲染的结果：

<div class="btn active">按钮</div>

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