vue动态绑定class和style，三目运算符条件判定

大家好，欢迎来到IT知识分享网。

参考文章：
vue动态绑定class和style，三目运算符条件判定
vue项目中使用三元运算符来更改class（附源码）

项目实战如下
template 中定义

<div :class="[ifAuth.includes('1') ? 'box_wrap2 box_wrap2_1 hy_cel active' : 'box_wrap2 box_wrap2_1 hy_cel']"
 @click="checktt('1')">

script 中data() 定义

    return { 
   
      ifAuth: [],
    };

methods 定义

checktt(i){ 
   
     // 在该项目需求中是，点击一个div，可以亮起来
     // 再次点击同一个div则变灰
      if ( this.ifAuth.indexOf(i)!=-1){ 
   
        this.ifAuth.splice(this.ifAuth.indexOf(i),1)
      }else { 
   
        this.ifAuth.push(i)
      }
    },

style 定义

.box_wrap2 box_wrap2_1 hy_cel active { 
   
background: url("~@/assets/images/c.png") no-repeat;
}
.box_wrap2 box_wrap2_1 hy_cel{ 
   
background: none;
}