vue中使用双重v-for循环列表,点击元素设置active样式,并且互不影响

本文介绍了一种在Vue中实现动态切换效果的方法,通过在循环嵌套结构中使用v-for指令结合@click事件监听,实现了根据点击事件更新外层元素的showFlag属性,从而动态改变内层元素的class,达到高亮显示当前选中项的效果。
摘要由CSDN通过智能技术生成

先上效果图效果图

思路剖析

1.给第一层级添加字段showFlag,默认值都为0
2.在切换方法中传入第一和第二层级的index,将对应外层级的showFlag的值等于内层级的index
3.在视图中的内层循环动态设置class,该class的满足条件:内层index === 外层数组list[parentIndex].showFlag

上代码

 <div class="system-item" v-for="(data,parentIndex) in dataDiskList">
        <div class="system-text">数据盘</div>
             <div class="item-box" @click="switchDataSize(index,parentIndex)" :class="{ 'item-box-active':index === dataDiskList[parentIndex].showFlag }"  v-for="(item,index) in diskListData" :key="index">
                            {{item.size}}GB
        </div>
</div>
switchDataSize(index,parentIndex){
    this.dataDiskList[parentIndex].showFlag = index
}  
最后只需要设置item-box-active的样式就好了
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值