对象方法
第一种：简单的绑定方法
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共存
