// 绑定单个内联样式

// 绑定单个class属性

// 数组的方式,直接绑定多个 class 属性

// 绑定多个class属性

// data 中声明

:class="classObject"

data() {

return {

classObject:{ active: true, sort:false }

}

}

// 第三种(使用computed属性)

:class="classObject"

data() {

return {

isActive: true,

isSort: false

}

},

computed: {

classObject: function () {

return {

active: this.isActive,

sort:this.isSort

}

}

:class="[isActive,isSort]"

data() {

return{

isActive:'active',

isSort:'sort'

}

}

// 数组与三元运算符结合判断选择需要的class

// 数组对象结合

:class="[{ active: isActive }, 'sort']"

// 复杂情况

{{title}}

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐