vue v-for如何让checkbox 选中的时候，当前index加个class，如下图和代码

Question

想要的效果 现在的问题 代码 <li v-for="(item,index) in tableTitleTable" :class="{'actived':itemTexAtctived}" class="body-item"> <label class="checkbox"> <input v-model="itemTexAtctived" type="checkbox"/> <span></span> </label> <span class="item-text">{{item}}</span> </li> itemTexAtctived: false, tableTitleTable:["ID","讲义标题","所属教材","年级","科目","使用次数","来源","创建人","创建时间"]

Answer 1

tableTitleTable:[
{item:"ID",
isChecked:false
},
{item:"讲义标题",
isChecked:false
},
{item:"所属教材",
isChecked:false
},
{item:"年级",
isChecked:false
},
{item:"科目",
isChecked:false
},
{item:"使用次数",
isChecked:false
},
{item:"来源",
isChecked:false
},
{item:"创建人",
isChecked:false
},
{item:"创建时间",
isChecked:false
}]

<li v-for="(item,index) in tableTitleTable" :class="{'actived':item.isChecked}"
<input v-model="itemTexAtctived" type="checkbox" @click="changeChecked(index)"/>

changeChecked(index) {
this.tableTitleTable[index].isChecked = !this.tableTitleTable[index].isChecked
}
机房电脑没有编译器，记事本敲得。可能有点错误，大概思想就是这样。数据里增加一个isChecked状态，通过改变这个状态来改变样式。

Answer 2

做个判断就好了 <input v-model="itemTexAtctived" type="checkbox" checked={{index === curIndex}}/>