伪类动态绑定雪碧图

最新推荐文章于 2024-01-10 15:20:30 发布

杨杨得亿~

最新推荐文章于 2024-01-10 15:20:30 发布

阅读量169

点赞数

文章标签： html5 javascript html

本文链接：https://blog.csdn.net/ys_dd/article/details/119948068

版权

雪碧图：（动态绑定上面的或者下面的）

HTML：（动态绑定current）

 <div class="swiper-slide" v-for="(item,index) in carList" :key="index" v-if="userInfo.carInfo&&userInfo.carInfo.vin!=item.vin" @click="carClick(item)" :class="{current:item.current}">
  <div class="mask_center_p">
    <div class="center_pone">{{item.carStyleName}}</div>
    <div class="center_ptwo">VIN：{{item.vin}}</div>
  </div>
 </div>

js:

 carClick(item){
   this.carList.forEach(item=>{
        item.current = false;
      });
   item.current = true;
 },

css:

 .swiper-slide {
      display: flex;
      height: auto;
      margin-bottom: 30px;

         &::before{
            display: block;
            content: '';
            height: 33px;
            width: 33px;
            border-radius: 50%;
            background: url('~@/static/images/index/index_ifchoose.png') no-repeat left bottom;
            background-size: 33px auto;     
          }
         &.current{
            &::before{
               background-position: left top;
              }
           }
}