vue v-if和v-for在同一标签

最新推荐文章于 2023-03-17 16:09:40 发布

CC105丶

最新推荐文章于 2023-03-17 16:09:40 发布

阅读量257

点赞数

分类专栏： vue相关文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43866678/article/details/122475405

版权

vue相关专栏收录该内容

15 篇文章 0 订阅

订阅专栏

// 在Vue2中，v-for优先级是高于v-if的
<div v-for="item in [1, 2, 3, 4, 5, 6, 7]" v-if="item !== 5">
    {{item}}
</div>

// 这种写法，会先把7个元素都遍历出来，再逐一判断是否为5，把5给隐藏，这样就渲染了无用的节点，增加dom操作，可以使用computed来处理

<div v-for="item in list">
    {{item}}
</div>

computed() {
    list() {
        return [1, 2, 3, 4, 5, 6, 7].filter(item => item !== 5)
    }
  }