如何避免在使用v-for指令的元素上同时使用v-if指令？

嘿，这个问题我太熟了——在同一个元素上混用v-for和v-if绝对是Vue里的经典坑，不仅性能拉胯，时间长了代码还容易乱成一团。我结合你手里的披萨数据，给你拆解下怎么完美避开这个问题～

先搞懂为啥不能这么干 #

Vue里v-for的优先级比v-if高，也就是说，它会先把所有披萨挨个循环渲染一遍，再挨个判断要不要显示——哪怕你只想看库存大于0的披萨，它也会先把库存为0的披萨都处理一遍，纯纯做无用功，数据量大的时候性能问题会特别明显。

方案1：用<template>做容器，分离v-for和v-if #

如果只是临时要在循环里加判断，你可以把v-for放在<template>标签上（这个标签不会渲染成真实DOM，只是个占位容器），把v-if放在里面的实际元素上。比如你想只显示库存大于0的披萨：

<template v-for="pizza in pizze.typeOne.data" :key="pizza.id">
  <div v-if="pizza.inventory > 0">
    {{ pizza.name }} - {{ pizza.price }}€
  </div>
</template>

不过这个方案只是解决了语法上的冲突，性能上还是会循环所有数据，所以更推荐下面这个最优解。

方案2：用计算属性提前过滤数据（强推！） #

这才是真正从根源解决问题的办法——在组件的计算属性里先把需要显示的数据过滤好，然后v-for直接遍历过滤后的数组，完全不需要v-if了。而且Vue会缓存计算结果，只有当原始数据变化时才重新计算，性能拉满，代码也更清晰。

结合你的披萨数据，代码示例是这样的：

<template>
  <div class="pizza-list">
    <div 
      v-for="pizza in availablePizzas" 
      :key="pizza.id"
      class="pizza-item"
    >
      <h3>{{ pizza.name }}</h3>
      <p>价格：{{ pizza.price }}€</p>
      <p>配料：{{ pizza.ingredients.join(', ') }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pizze: {
        type: "pizze",
        typeOne: {
          title: "Pizze Rosse",
          data: [
            {id:1,type:"pizza",name:"Margherita",price:4,ingredients:["pomodoro","mozzarella"],quantity:0,inventory:100},
            {id:2,type:"pizza",name:"Marinara",price:3.5,ingredients:["aglio","pomodoro"],quantity:0,inventory:100},
            {id:3,type:"pizza",name:"Salsiccia e funghi",price:6,ingredients:["salsiccia","funghi"],quantity:0,inventory:0}
          ]
        }
      }
    }
  },
  computed: {
    availablePizzas() {
      // 这里写你的过滤逻辑，比如只留库存大于0的披萨
      return this.pizze.typeOne.data.filter(pizza => pizza.inventory > 0)
    }
  }
}
</script>

这样一来，v-for只遍历已经筛选好的availablePizzas，逻辑清晰，性能也没毛病。

额外场景：判断整个列表是否显示 #

如果你想在披萨列表有数据的时候才显示整个列表，那直接把v-if放在列表的父容器上就行，完全不用和v-for搅在一起：

<div v-if="pizze.typeOne.data.length > 0" class="pizza-list">
  <div v-for="pizza in pizze.typeOne.data" :key="pizza.id" class="pizza-item">
    {{ pizza.name }}
  </div>
</div>

总结一下：核心就是把过滤逻辑从DOM层移到数据层，或者把v-if和v-for放到不同层级的元素上，既避坑又能让代码更好维护～

内容的提问来源于stack exchange，提问作者Giacomo Ciampoli