在vue实际开发中,避免不了会使用v-for和v-if来操作数据,但是v-for和v-if同时使用时,有一个先后运行的优先级,v-for比v-if的优先级更高,这就说明在v-for的每次循环运行中每一次都会调用v-if的判断,所以不推荐v-if和v-for在同一个标签内同时使用。为了避免上述情况的发生,我们通常会采用如下的两种方法:

1>ul和li搭配使用,或者是渲染父级标签下的子标签,可以使用如下方法:

<ul v-if="state">
	<li v-for="(item,id) in list" :key="id"></li>
</ul>

2>可以使用过滤器将v-if中的判断转移到vue的computed的计算属性中,方法如下:


<ul>
	<li v-for="(item,id) in formList" :key="id"></li>
</ul>
 
//利用vue的计算属性,过滤掉不需要的数据,剩下需要的数据再利用v-for循环遍历取出渲染
computed: {
	formList: function () {
		return this.list.filter(function (item) {
			return item.state
		})
	}
}

https://blog.csdn.net/Kreme/article/details/89310433?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-89310433-blog-111462519.pc_relevant_multi_platform_whitelistv1&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-89310433-blog-111462519.pc_relevant_multi_platform_whitelistv1&utm_relevant_index=1


您已经阅读00:00:00欢迎留言评论,喜欢的话就为作者点个赞或者赏颗糖吧! 分享