为了账号安全,请及时绑定邮箱和手机立即绑定

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
}
机房电脑没有编译器,记事本敲得。可能有点错误,大概思想就是这样。数据里增加一个isChecked状态,通过改变这个状态来改变样式。


查看完整回答
反对 回复 2019-03-20
?
MMTTMM

TA贡献1869条经验 获得超4个赞

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


查看完整回答
反对 回复 2019-03-20
  • 3 回答
  • 0 关注
  • 1212 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号