【Vue】:class动态绑定的几种用法

: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>

结果：