vue动态绑定class的最常用几种方式
程序员文章站
2022-06-26 23:29:53
vue动态绑定class的最常用几种方式: 第一种:(最简单的绑定) 1.绑定单个class html部分: js部分:判断是否绑定一个active 结果渲染为: 2.若要绑定多个class,需要逗号隔开就行:(这里的activeTwo加不加引号都可以,也一样都能渲染,如下) js部分:判断是否绑定 ......
vue动态绑定class的最常用几种方式:
第一种:(最简单的绑定)
1.绑定单个class
html部分:
<div :class="{'active':isactive}"></div>
js部分:判断是否绑定一个active
data() { return { isactive: true }; }
结果渲染为:
<div class="active"></div>
2.若要绑定多个class,需要逗号隔开就行:(这里的activetwo加不加引号都可以,也一样都能渲染,如下)
<div class="activeone" v-bind:class="{ activetwo: isactive, 'activethree': haserror }"></div>
js部分:判断是否绑定对应class
data() { return { isactive: true, haserror: true }; }
结果渲染为:
<div class="activeone activetwo activethree"></div>
第二种:(绑定的数据对象)
<div :class="classobject"></div>
data: { classobject: { active: true, } }
第三种:(绑定一个返回对象的计算属性)
<div :class="classobject"></div>
export default { data() { return { isactive: true, }; }, computed: { classobject: function () { return { active: this.isactive, } } }
结果渲染为:
<div class="active"></div>
第四种:(单纯数组方法)
<div :class="[activeclass, errorclass]"></div>
data() { return { activeclass: "active", errorclass: "disactive" }; },
结果渲染为:
<div class="active disactive"></div>
第五种:(数组与三元运算符结合判断选择需要的class)
<div :class="[isactive?'active':'disactive']"></div>
data() { return { isactive: false, }; },
结果渲染为:
<div class="disactive"></div>