vue 点击切换动态Class变化,实现当前样式改变

最新推荐文章于 2024-07-20 10:27:41 发布

小何同学要加油

最新推荐文章于 2024-07-20 10:27:41 发布

阅读量2.3k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Anony_me/article/details/126384968

版权

Vue.js 动态Class 点击事件样式切换数据绑定

关键词由CSDN通过智能技术生成

vue 点击切换动态Class变化,实现当前样式改变

<swiper-slide v-for="item,key in metaBelong" :key="key">
            <div class="unbginner" //不点击时，默认展示的class样式
                 :class="{'bginner':isActive==key}" //点击之后显示bginner的样式
                  @click="swiperList(key)">    
                  </div>
                  </swiper-slide>

在这里插入图片描述

1. data里增加一个变量，用来储存当前点击的元素

return {
    isActive: 0, // 0为默认选择第一个，-1为不选择

};

2. 点击swiperList事件：改变data里面isActive的值

 const swiperList=(index)=>{
        //根据点击更换颜色
         data.isActive=index
         })

3. style样式中

 .bginner{
   background: url("../../assets/image/形状2.png") no-repeat !important;//加入!important可以替代上一个background属性
   background-size: 100% 100%;
   width: 19vw;
   height: 14vh;
   opacity: 1 !important;//加入!important可以替代上一个opacity属性
  }
   .unbginner{
   background: url("../../assets/image/形状3.png") no-repeat ;
   background-size: 100% 100%;
   width: 20vw;
   height: 14vh;
   opacity: 0.7 ;
  }