vue中v-if和v-for混用时应该注意的事项

最新推荐文章于 2025-07-06 22:51:21 发布

原创最新推荐文章于 2025-07-06 22:51:21 发布 · 2.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端专栏收录该内容

26 篇文章

订阅专栏

本文探讨了Vue.js中v-if与v-for的高效使用策略，通过计算属性和结构调整，避免不必要的渲染，提高应用性能。具体包括使用计算属性过滤列表和调整v-if的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-if和v-for一般不建议一起使用，如果一定需要用到，最好使用一下两种方法进行替换。
1、当根据遍历的列表中的对象的某一个属性决定展示与否的时候，使用计算属性(computed)进行判断，computed的具体介绍详见：https://cn.vuejs.org/v2/guide/computed.html。

例子：遍历users，如果对象的isShow属性为true时候展示

users: [
        {'name': '111', 'isShow': true},
        {'name': '222', 'isShow': false},
        {'name': '333', 'isShow': false},
        {'name': '444', 'isShow': true}
      ]

改良前：因为v-for优先级比v-if高，所以在每次重新渲染的时候会先遍历整个列表，再进行if判断是否展示，即：每次都需要重新渲染全部列表对象再判断是否需要展示

<ul>
  <li v-for="user in users" v-if="user.isShow">
    {{ user.name }}
  </li>
</ul>

改良后：会先判定列表对象时候需要显示，之后渲染需要显示的对象，效率更高

// 渲染代码
<ul>
  <li v-for="user in showUsers" :key="user.id" >
    {{ user.name }}
  </li>
</ul>

// 计算属性代码
computed: {
    showUsers: function () {
      return this.users.filter(function (user) {
        return user.isShow
      })
    }
  }

2、根据某一个与待循环列表无关的属性决定是否展示渲染后的数组对象时，可以把v-if上移。

例子：根据isShow属性决定是否显示users列表

users: [
        {'name': '111'},
        {'name': '222'},
        {'name': '333'},
        {'name': '444'}
      ],
isShow: true

改良前：

<ul>
  <li v-for="user in users" v-if="isShow">
    {{ user.name }}
  </li>
</ul>

改良后：

<ul v-if="isShow">
  <li v-for="user in users">
    {{ user.name }}
  </li>
</ul>