v-for与v-if使用注意事项

Posted 2023-03-09

参考技术A 原始需求：两个相似的页面中，只有列表项数目不一样。如下所示，图1是一个页面的列表（部分），图二是另外一个页面的列表（部分）

两个表格的差别，仅仅在于列表2比列表1少两行数据。列表数据存在数组 attachments 中，该数组需要向外部传数据，所以格式不希望变动，为了复用页面，动态加载页面，很容易想到在数据中添加show字段，用来控制显示和隐藏。

第一种解决方案： 使用 v-for 和 v-if 的组合应用 ，由于v-for是v-if不能写在同一个元素中，则v-if 可以放在v-for内层，注意一点：key不能放在template中，可以将key放在内层元素中。

但是，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中，出于性能考虑，不建议v-for 同 v-if 一起使用。可以将v-if 放在v-for的外层。如果一定要将判断放在循环中，则可以考虑下面的解决办法。

第二种解决方案： 使用计算属性 ，将符合条件的数据过滤使用。

这样，既可以动态显示想要的数据，同时也不会破坏原有attachments 数组数据结构，为最佳实践方案。