?如圖所示，要有一個區分來顯示，如果一開始就是這樣還可以有很多種處理方式，但是這個后期一直在調整所以不好重做因為開發已經完成，加上很多地方聯動改的地方太多，所以采用了一個比較笨的方法

 <ul class="classification"><li v-for="(item, index) in classificaObj.slice(0,5)" :key="index" :class="selectClassifica(item, index)" @click="classificaHandle(item,index)"><p :class="'icon ' + item.icon" :id="item.code">{{item.name}} </p><p class="num">{{item.num ? item.num : 0}}</p></li></ul><ul class="classification classificationPurple"><li v-for="(item, index) in classificaObj.slice(5)" :key="index" :class="selectClassifica(item, 5 + index)" @click="classificaHandle(item,( 5 + index))"><p :class="'icon ' + item.icon" :id="item.code">{{item.name}} </p><p class="num">{{item.num ? item.num : 0}}</p></li></ul>

classificaObj: [{ icon: "icon-dqs", code: "dqsNum", name: "xxxxx", statu: 3, num: 0 },{ icon: "icon-kgjg", code: "kgjgNum", name: "yyyy", statu: 4, num: 0 },{ icon: "icon-jryxj", code: "mzyxjNum", name: "zzzzzz", statu: 2, num: 0 },{ icon: "icon-jrdxj", code: "mzdxjNum", name: "wwwwwww", statu: 1, num: 0 },{ icon: "icon-ysjg", code: "ysjqNum", name: "nnnnnnn", statu: 5, num: 0 },{ icon: "icon-xjyc", code: "xjycNum", name: "ppppppp", statu: 6, num: 0 },{ icon: "icon-wzsg", code: "wzsgNum", name: "ccccccc", statu: 8, num: 0 },],

?selectClassifica 是樣式類型根據需求變換

selectClassifica(item, index) {let obj = {}// 這里要盡量避免使用indexif (this.classificaActive == index) {obj['active'] = true}// 類型區分if (item.code == 'xjycNum' || item.code == 'wzsgNum') {obj['typePurple'] = true}return obj;},

classificaHandle(item, index) {console.log('點擊各標簽.....', item, index)if (item.code === 'wzsgNum') {this.$router.push({name: "unlicensedConstru",});} else {// 這里也是盡量不用index, 最后編寫數據的時候定義一個唯一的標識來賦值// 比如用數據中code 或者 statu this.classificaActive = index;} },

看代碼classificaObj.slice(0,5) 是要區分的前幾個，classificaObj.slice(5) 是去除前面的后剩下的幾個，這里就寫死了，后期如果還有變動就需要再次調整，但是沒有辦法，還有一個要注意的就是在寫選中事件的時候盡量避免使用index來做選中，這樣就可以避免后期出現很多問題!