1.给盒子添加动态属性:class="[index === isActive?'active-box':'choose-box']"
<div v-for="(item,index) in zyList" :key="item.sid" :class="[index === isActive?'active-box':'choose-box']" @click="getKmList(item,index)"><p>{{item.kskm}} 专业</p><div class="choose-content"><el-button type="text" size="mini" icon="far fa-building" style="color:var(--base-color-text)">场次 <span class="num">{{item.ypcc}}</span></el-button><el-button type="text" size="mini" icon="far fa-user" style="color:var(--base-color-text)">已排人次 <span class="num">{{item.yprc}}/{{item.zrc}}</span></el-button></div></div>
2.控制选中的盒子的样式:this.isActive = index;
...data() {return {isActive:0, }methods: {//盒子点击事件getKmList(e,index){this.kskm = e.kskm;this.isActive = index;getRequest(this.url.kmList,{kskm:this.kskm}).then(res=>{if (res.status){this.kmList = res.data;}})},}
3.css代码,准备两个样式切换就行
.active-box{
...
}
.choose-box{
...
}