vue中v-if和v-for的优先级问题

vue中v-if和v-for的优先级问题

1、实践中最好不要把v-if和v-for放一起
2、在vue2中v-for优先级高于v-if,而在vue3中v-for优先级低于v-if,vue2和vue3恰好相反,
示例:

<li v-for=“user in users" v-if="user.isActive">li>

在vue2中会出现不停的循环,然后每个循环结果做v-if,显然会先渲染出本不想渲染出来的内容,对于这种可以定义一个计算属性,使用filter返回符合条件的列表activeUsers;在vue3中因为v-if优先级较高,user显然是不存在的,在vue3中可以把v-if提到外层容器上或者增加一个template外层标签,如:

<ul v-if="activeUsers.length > 0">
	<li v-for=“user in users">li>
ul>

你可能感兴趣的:(前端,vue,vue.js,javascript,前端)