:class 在后台管理系统,左侧菜单,点击后给被点击菜单加个样式或者给当前选项卡一个样式等等,都会用到。为了方便查找、整理一下。
绑定单个
:class="{'activeBg': item.key === activeMenu }" //条件成立就会显示activeBg样式
//或者
:class="{'activeBg': ifTrue}" //ifTrue为真显示activeBg样式
//或者
:class="item.key === activeMenu ? 'activeBg' : ''" //三元运算形式
错误的用法
:class="{ item.key === activeMenu ? 'activeBg': '' }" //错误用法
//但是用数组括起来是可以的
:class="[item.key === activeMenu ? 'activeBg': null]"
绑定多个
//通过ifTrue、ifActive两个变量来控制样式类是否展示
:class="{'activeBg': ifTrue, 'active': ifActive}"
或者
<template>
<p>:class="[isRed, 'green', {border: true}]">我是用来测试的</p>
</template>
data() {
isRed: "red",
}
<style>
.red{
color:red;
}
.green{
background:green;
}
.border{
border:4px solid #ccc;
}
</style>
结果: