Vue.js动态class

在项目中我们经常遇到需要动态切换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>

掌握这两种方法就足够应付大部分场景了。

感谢您的关注~