鍍金池/ 問(wèn)答/HTML/ vue項(xiàng)目中v-for循環(huán)出來(lái)的數(shù)據(jù)如何做成tab選項(xiàng)卡？

vue項(xiàng)目中v-for循環(huán)出來(lái)的數(shù)據(jù)如何做成tab選項(xiàng)卡？

<ul>
    <li v-for="(i,index) in type_name" @click="typeName(index)">{{i.type_name}}</li>
</ul>

選中效果的class名為active_ia，如圖所示：圖片描述

請(qǐng)教，怎么做？

回答
編輯回答
念初

在data中加一個(gè)currentIndex，代表選中的索引，點(diǎn)擊的時(shí)候改變一下

data() {
    return currentIndex:0
},
methods: {
  typeName(index) {
    this.currentIndex = index
  }
}
<ul>
    <li v-for="(i,index) in type_name" :class="index===currentIndex?'active_ia':''" @click="typeName(index)">{{i.type_name}}</li>
</ul>
2017年3月11日 06:52