天天看点

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

项目中有这样一个列表:

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

我想通过代码来控制是上传还是删除

但如果常规方法给列表项加v-if的话,三个位置的“上传”不能单独控制,只能三个一起变。因为三个当中的v-if判断条件都是一样的。

想要做到单独控制,就需要在v-if的条件里面做文章:

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

像上面这样,每个列表项都有一个对应的record,每个record中都有一个Id,这里分别为record1、record2、record3

事先在data()中定义一个变量isFileUpShow,用来控制“上传”的显示和隐藏:

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

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

在需要改变的地方,比如要用代码单独控制第二个列表项中“上传”的隐藏,可以这样做:

这样的话,第二个列表项中v-if的条件就切换到了false,这时候第二个列表项中的“上传”也就隐藏了,而其他列表项的“上传”依然是显示的