第一种:通过一个布尔值判断样式类是否生效

//isActive 是在data里面布尔值,   rotateRight 是 class 样式类 
//isActive 为true时样式类 rotateRight 生效


<div :class="{rotateRight:isActive}">abs</div>

第二种:通过三元运算符判断使用哪个样式类

//isActive 是在data里面布尔值 rotateRight 是 class 样式类 
//isActive 为 true 时样式类 right 生效,为 false 时样式类 right2 生效

<div :class="[isActive ? 'right' : 'right2']">abs</div>

固定的样式和动态绑定同时存在

errorClass 是始终存在的,isActive 为 true 时添加 activeClass 类:

<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>

 

Logo

前往低代码交流专区

更多推荐