新手学做网站12天婴/seo基础课程

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{
...
}