鍍金池/ 問答/Java  PHP  C  HTML/ vue v-for如何讓checkbox 選中的時候，當(dāng)前index加個clas

vue v-for如何讓checkbox 選中的時候，當(dāng)前index加個class，如下圖和代碼

想要的效果

clipboard.png

現(xiàn)在的問題

clipboard.png

clipboard.png

代碼

                            <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","講義標(biāo)題","所屬教材","年級","科目","使用次數(shù)","來源","創(chuàng)建人","創(chuàng)建時間"]
回答
編輯回答
孤毒

tableTitleTable:[
{item:"ID",
isChecked:false
},
{item:"講義標(biāo)題",
isChecked:false
},
{item:"所屬教材",
isChecked:false
},
{item:"年級",
isChecked:false
},
{item:"科目",
isChecked:false
},
{item:"使用次數(shù)",
isChecked:false
},
{item:"來源",
isChecked:false
},
{item:"創(chuàng)建人",
isChecked:false
},
{item:"創(chuàng)建時間",
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
}
機(jī)房電腦沒有編譯器，記事本敲得?？赡苡悬c(diǎn)錯誤，大概思想就是這樣。數(shù)據(jù)里增加一個isChecked狀態(tài)，通過改變這個狀態(tài)來改變樣式。

2017年6月11日 10:24
編輯回答
醉淸風(fēng)

v-model 寫在li標(biāo)簽里

2017年12月25日 13:43
編輯回答
冷溫柔

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

2018年9月22日 03:20