达到隐藏效果

v-ifflag/divv-for用来进行遍历可以遍历数字对象数组会将整个元素遍历指定次数

!--

:keyindex{{item}}/div如果将遍历元素v-for和删除元素v-if连用会发生什么

在Vue

2中v-for的优先级比v-if高因此在连用的时候会先进行v-for将所有元素渲染到页面上之后再进行v-if判断删除元素这样会导致性能的浪费每次先渲染元素再进行判断删除

官网上给了一个例子可以简单理解一下。

在这个例子中会先将用户进行遍历渲染(v-for)再去判断用户是否为活跃用于v-if。

在这里只需要活跃用户渲染但是由于v-for的优先级更高因此无论是否为活跃用户都会渲染这样会造成资源的浪费。

ulliv-foruser

usersv-ifuser.isActive:keyuser.id{{

user.name

看看官网上给的例子给一个用户列表遍历活跃用户user.isActive为true。

ulliv-foruser

usersv-ifuser.isActive:keyuser.id{{

user.name

moment.将抛出一个错误因为v-if指令将首先求值并且迭代变量user此时不存在。

由官网给的解释可以看出直接将v-if和v-for连用可能会出现报错因此不建议在同一节点中连用。

解决方案

activeUsers过滤出满足条件的用户将遍历的users改为activeUsers

computed:

/ul或者使用嵌套关系将v-if添加到外层元素上。

先判断是否要展示用户信息满足条件再进行渲染。

users:keyuser.id{{

第二个方法嵌套。

与vue2不同的是在vue3中将v-for移动至外层的元素上。

ultemplate

在Vue2中v-for的优先级更高。

在Vue3中v-if的优先级更高。

无论哪个优先级更高都不建议在同一节点连用v-if和v-for。