在项目中我们经常遇到需要动态切换
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>
掌握这两种方法就足够应付大部分场景了。
感谢您的关注~
