> 在项目中我们经常遇到需要动态切换`class`的需求，比如说点击图片放大，又或者选中项变颜色，再比如实现换皮肤的功能等等。这时候`vue`的动态`class`就能帮助我们了。
# 使用对象控制class
- boolean控制
```
<div v-bind:class="{ active: isActive }"></div>
```
在上面的语法中，``active``是class的名字，``isActive``是一个控制class动态展示的``boolean``值。当然以上是对象控制class最简单的用法。
- 多个boolean控制多个class。我们可以将它扩展成如下的样子以达到更复杂的样式控制。
```
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
```
```
data: {
isActive: true,
hasError: false
}
```
- 或者直接传递对象
```
<div v-bind:class="classObject"></div>
```
```
data: {
classObject: {
active: true,
'text-danger': false
}
}
```
在对象中通过`boolean`值控制class
- 在``computed``中控制样式
```
<div v-bind:class="classObject"></div>
```
```
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
```
可以看到classObject在计算属性中，我们可以通过改变``isActive``和``error``的值来达到动态控制class的效果。
# 使用数组控制class
- 我们可以把一个数组传给 `v-bind:class`，以应用一个 class 列表
```
<div v-bind:class="[activeClass, errorClass]"></div>
```
```
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
```
以上代码会被渲染成：
```
<div class="active text-danger"></div>
```
- 如果想要在数组中动态切换样式，可以使用三目运算符：
```
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
```
- 也可以数组和对象结合使用：
```
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
```
由于用法繁多，平时我们也用不到这么多用法，最常用的就是以下几种：
```
<div v-bind:class="{ active: isActive }"></div>
```
```
<div v-bind:class="[{ active: isActive }, { error: isError }]"></div>
```
掌握这两种方法就足够应付大部分场景了。
**感谢您的关注~**