为什么避免v-if和v-for一起使用和解决方案

1|0为什么避免v-if和v-for一起使用和解决方案

• 原因：

  当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中，造成性能方面的浪费。所以永远不要把 v-if 和 v-for 同时用在同一个元素上。

• 解决方案：

  1. 如果避免出现这种情况，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环

     <template v-if="isShow">
         <p v-for="item in list">
     </template>
     

  2. 如果条件出现在循环内部，可通过计算属性computed提前过滤掉那些不需要显示的项

     computed: {
         items: function() {
           return this.list.filter(function (item) {
             return item.isShow
           })
         }
     }
     

__EOF__

本文作者：凉宫春日大胜利
本文链接：https://www.cnblogs.com/HaruhiSuzumiya/p/16940868.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！