【Vue3】v-if和v-for优先级

🎈博客主页：🌈我的主页🌈
🎈欢迎点赞 👍 收藏 🌟留言 📝 欢迎讨论！👏
🎈本文由 【泠青沼~】 原创，首发于 CSDN🚩🚩🚩
🎈由于博主是在学小白一枚，难免会有错误，有任何问题欢迎评论区留言指出，感激不尽！🌠个人主页

---

---

🌟 一、避免 v-if 和 v-for 一起使用

永远不要把 v-if 和 v-for 同时用在同一个元素上

一般我们在两种常见的情况下会倾向于这样做：

1. 为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)

在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。

2. 为了避免渲染本应该被隐藏的列表 (比如 v-for=“user in users” v-if=“shouldShowUsers”)

这种情形下，请将 v-if 移动至容器元素上

🌟 二、优先级

当 v-if 与 v-for 一起使用时，v-if 具有比 v-for 更高的优先级

<el-sub-menu index="1" v-for="(item,index) in this.$router.options.routes" v-if="!item.hidden" :key="index"><template #title ><el-icon><Location/></el-icon><span>{{item.name}}</span></template><el-menu-item :key="index" :index="child.path" v-for="(child,index) in item.children">{{child.name}}</el-menu-item>
</el-sub-menu>

同时使用v-if和v-for就会使得item元素还有进行渲染，就进行了if判断语句，导致item元素被判定为未定义，然后报错

Property "item" was accessed

🌟 二、解决方法

• 过滤一个列表中的项目，将if中的条件用来过滤数组或对象，替换为一个计算属性，让其返回过滤后的数组或对象
• v-if 移动至容器元素上
• 可以使用v-show来代替（视情况而定）