猿问

vue v-for如何让复选框选中的时候,加个class

想要的效果


现在的问题

https://img4.mukewang.com/5c91a9ac000152da05490323.jpg

https://img.mukewang.com/5c91a9ad0001595f05580369.jpg


代码

                            <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","讲义标题","所属教材","年级","科目","使用次数","来源","创建人","创建时间"]


侃侃尔雅
浏览 1213回答 3
3回答

潇潇雨雨

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状态,通过改变这个状态来改变样式。

MMTTMM

做个判断就好了 <input v-model="itemTexAtctived" type="checkbox" checked={{index === curIndex}}/>
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答