最近在做vue項目需要做到排他思想,本來如果用jq做很簡單的一件事,到了vue里面也是挺簡單的(<li v-for="(listRenderingList,index) in listRenderingLists" v-on:click="onclick(index)" v-bind:class=" {active:index==dynamic}">{{index}})。這種寫法相信很多人都會寫,這種寫法對於我這項目還是有bug,具體bug就是,后台返回的數據格式,本來后台返回的格式也沒毛病,就是用這種判斷添加一個類不能滿足我的項目,讓我糾結。故此寫一下思路
0 bug
1 后台返回的數據格式,這種格式渲染起來非常簡單
2 動態給生成的li注冊點擊事件
<li class="lis_color" v-for="(item ,index) in val.list" :key="index"
@click="changebgcolor3(item,index,topindex)" v-bind:class="{changebgcolor:selectchangeclass(curindex,curtopindex,index,topindex)}" >
3 方法里面寫判斷,這樣完美解決了排他思想
selectchangeclass(curindex,curtopindex,index,topindex){
if(curindex===index&&topindex==curtopindex){
return true;
}
},
changebgcolor3(item,index,topindex) {
this.curindex = index;
this.curtopindex = topindex;
},