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

参考文章:
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;
}
    原文作者:Slow菜鸟
    原文地址: https://blog.csdn.net/qq_20236937/article/details/125544421
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞