亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

vue v-for如何讓復選框選中的時候,加個class

vue v-for如何讓復選框選中的時候,加個class

侃侃爾雅 2019-03-07 10:27:06
想要的效果現在的問題代碼? ? ? ? ? ? ? ? ? ? ? ? ? ? <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","講義標題","所屬教材","年級","科目","使用次數","來源","創建人","創建時間"]
查看完整描述

3 回答

?
瀟瀟雨雨

TA貢獻1833條經驗 獲得超4個贊

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
}
機房電腦沒有編譯器,記事本敲得??赡苡悬c錯誤,大概思想就是這樣。數據里增加一個isChecked狀態,通過改變這個狀態來改變樣式。


查看完整回答
反對 回復 2019-03-20
?
MMTTMM

TA貢獻1869條經驗 獲得超4個贊

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


查看完整回答
反對 回復 2019-03-20
  • 3 回答
  • 0 關注
  • 1162 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號