v-for与v-if不能同时使用

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同时放在一起出现错误或警告的问题了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值