vue 动态class类名 多个判断

vue 动态class 类名 多个判断

<a
   class="p-1 pl-2 pr-2  rounded-lg"
   data-toggle="dropdown"
   @click="show()"
   :class="{'redText':textStr == '待处理','blueText':textStr == '处理中','greenText':textStr == '已处理'}"
> {{ textStr }} <img src="./assets/img-zxtj/2.png" alt="" style="width:.9375rem">
</a>

用三元表达式进行多个判断，对象的方式逗号隔开。

静态class 和v-bind:class 是可以同时存在的

***css ***

.redText {
  color: red !important;
}
.blueText {
  color: #0071e1 !important;
}
.greenText {
  color: #00B200 !important;
}

***不起效果看看是不是被覆盖掉了

最终效果图：

点击哪个就添加对应的颜色类名就OK了~