Vue中v-if和v-for的一起使用时的几种处理方式

最新推荐文章于 2025-03-13 07:30:00 发布

五花漏

最新推荐文章于 2025-03-13 07:30:00 发布

阅读量1.8w

点赞数 13

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/qq_37024887/article/details/104970950

版权

VUE 专栏收录该内容

19 篇文章

订阅专栏

本文深入探讨了Vue.js框架中v-if与v-for指令的使用原则及性能考量，尤其强调了在循环中结合条件判断的场景下，如何通过计算属性优化列表渲染效率，避免不必要的重复计算。

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

在处于同一节点的时候，v-for 优先级比 v-if 高。这意味着 v-if 将分别重复运行于每个 v-for 循环中。即——先运行v-for 的循环，然后在每一个v-for 的循环中，再进行 v-if 的条件对比。所以，不推荐v-if和v-for同时使用。

1、template

<template v-for="(item, index) in list" :key="index">	
   <div v-if="item.isShow">{{item.title}}</div>
</template>

2、计算属性(推荐使用)

<template>
 <div>
	<div v-for="(user,index) in activeUsers" :key="user.index" >
		{{ user.name }} 
	</div>
</div>
</template>
<script>
export default {
  name:'A',
  data () {
    return {
      users: [{name: 'aaa',isShow: true}, 
              {name: 'bbb',isShow: false}]
    };
  },
  computed: {//通过计算属性过滤掉列表中不需要显示的项目
	activeUsers: function () {
	  return this.users.filter(function (user) {
		return user.isShow;//返回isShow=true的项，添加到activeUsers数组
	  })
	}
  }
};
</script>