vue 列表单个元素的显示和隐藏

本文介绍如何在Vue项目中实现列表单个元素的显示和隐藏。通过结合列表项的数据属性与Vue的v-if指令,利用动态变量控制每个列表元素的显示状态。在data中定义isFileUpShow变量,根据记录ID设置条件,从而实现对列表中特定元素的单独控制。
摘要由CSDN通过智能技术生成

项目中有这样一个列表:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

我想通过代码来控制是上传还是删除
但如果常规方法给列表项加v-if的话,三个位置的“上传”不能单独控制,只能三个一起变。因为三个当中的v-if判断条件都是一样的。
想要做到单独控制,就需要在v-if的条件里面做文章:
在这里插入图片描述
像上面这样,每个列表项都有一个对应的record,每个record中都有一个Id,这里分别为record1、record2、record3
事先在data()中定义一个变量isFileUpShow,用来控制“上传”的显示和隐藏:
在这里插入图片描述

这样操作一下,初始时v-if中的条件 “isFileUpShow[record.Id] === record.Id” 全为true。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值