<template>
<view class="select-center widthleft80">
<view @click="selectOpen(item,index)" v-for="(item,index) in list" :class="[isActive == index ? 'active' : 'active_none']" class="select-center-list">
<view class="select-center-list-text1">
{{item.name}}
</view>
</view>
</view>
</template>
1.再view中添加循环并添加点击事件把项目的id和index传递进去
2.在html结构中,添加:class="[ isActive == index ? 'active' : 'active_none' ]"来判断
<script>
export default {
data() {
return {
isActive: -1,//data里面定义一个判断切换类名的变量isActive = -1,
list: [],//循环体
}
},
methods: {
selectOpen(item,index){//选择项目
console.log('项目id',item.id)
console.log('项目index',index)
if(this.isActive != index){
this.isActive = index;
}
},
}
}
</script>
3.让this.isActive = index,这样每次点击,就会把当前的索引值赋值给this.isActive
4.最后再点击事件中加入判断this.isActive != index即可
<style lang="scss">
.active {
border: 2rpx solid red;
box-sizing: border-box;
}
.active_none{
border: none;
}
</style>