该模块是用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%);
}