v-if 与 v-for 的优先级对比
概览
- 非兼容 : 两者作用于同一个元素上时,
v-if会拥有比v-for更高的优先级 (Vue2 是v-for优先级高)
介绍
Vue 使用最多的两个指令就是 v-if 和 v-for, 因此有时可能会想要同时使用它们。但是不建议这样做, 可以使用 <template> 标签嵌套一层。
2.x 语法
2.x 版本中在一个元素上同时使用 v-if 和 v-for 时, v-for 会优先作用。
3.x 语法
3.x 版本中 v-if 总是优先于 v-for 生效。
迁移策略
由于语法上存在歧义, 建议避免在同一元素上同时使用两者。
比起在模板层面管理相关逻辑，更好的办法是通过创建计算属性筛选出列表，并以此创建可见元素。