vue中v-for和v-if不能同时使用
在vue中v-for跟v-if同时使用出现问题
我们在做列表渲染的时候有时会遇到,我们需要不展示其中的某一项,但是如果我们把v-for和v-if写在一起又会出现一些错误,因为在vue中v-for的优先级会高于v-if ,而且如果每一次都需要遍历整个数组,将会影响速度,我们平常应该避免这样的使用,
一般我们在两种常见的情况下会倾向于这样做:
1,为了过滤一个列表中的项目 (比如 v-for=“itemin users” v-if=“user.isActive”)。在这种情形下,请将 users 替换为一个计算属性 (比如 activeUsers),让其返回过滤后的列表。
通过fliter去除自己不需要的数据
还可以只要自己想要的数据,这样就避免了渲染了很多自己不需要的数据
2,为了避免渲染本应该被隐藏的列表 (比如 v-for=“user in users” v-if=“shouldShowUsers”)。这种情形下,请将 v-if 移动至容器元素上 (比如 ul, ol)。
这样我们就能就做到避免v-for和v-if同时放在一起出现错误或警告的问题了