vuejs怎么添加class（实现各色花式需求）
vuejs怎么添加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> 由于用法繁多，平时我们也用
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>
掌握这两种方法就足够应付大部分场景了。
感谢您的关注~
