在处于同⼀节点的时候，v-for 优先级⽐ v-if ⾼。这意味着 v-if 将分别重复运⾏于每个 v-for 循环中。即——先运⾏v-for 的循环，然后在每⼀个v-for 的循环中，再进⾏ v-if 的条件对⽐。所以，不推荐v-if和v-for同时使⽤。
template
计算属性(推荐使⽤)
在 vue 2.x 中，在⼀个元素上同时使⽤ v-if 和 v-for 时，v-for 会优先作⽤。在 vue 3.x 中，v-if 总是优先于 v-for ⽣效。
1、选择性地渲染列表，例如根据某个特定属性来决定是否渲染，使⽤计算属性computed：
activeinHouseList: function() {
return this.inHouseList.filter((item) => { return item.is_expired === 1 }) }}
2、 避免渲染本该隐藏的列表项，将v-if放到循环列表元素的⽗元素中或使⽤template将v-for渲染的元素包起来，再在template上使⽤v-if。
总结：
vue2.x 中v-for优先级⾼于v-if，vue3.x 相反
尽量避免在同⼀个元素上⾯同时使⽤v-if和v-for，建议使⽤计算属性替代
因篇幅问题不能全部显示，请点此查看更多更全内容