vue项目下div模拟出的列表实现点击item项使其高亮、变更背景图等(很常用)

123 阅读1分钟

该模块是用div+v-for做的列表,便于写样式,选中item的时候需要高亮该item,可以用动态class的方法实现。

<div class="supermarket-item" :class="[isActive==index ? 'active':'']" 
@click="selectSupermarket(index)" v-for="(item,index) in supermarketList" :key="index">
                {{item.supermarketName}}
</div>

点击事件:该item被点击就将其index赋值给isActive这个全局变量

selectSupermarket(index){
      this.isActive = index
    }

div上的

:class="[isActive==index ? 'active':'']" 

即可通过isActive是否等于当前div的index,(三元表达式)判断其是否是被激活的项,从而加上.active这个类的样式

.active{
            background: linear-gradient(89deg, rgba(0, 217, 230, 0.30196078431372547) 0%, rgba(0, 221, 233, 0) 100%);
          }