在Vue.js中使用V-for-in-V-if是否是一种良好的做法？

在一个案例中，我们使用了：

<template>
  <div id="app">
    <button @click="fetch">Fetch numbers</button>

    <div v-if="!getNumbers.length">Waiting for numbers...</div>

    <div v-if="getNumbers.length">
      <div v-for="number in getNumbers" :key="number.id">
        <h5>{{ number.owner }}</h5>
        <p>{{ number.phone }}</p>
      </div>
    </div>
  </div>
</template>

取数
等待号码。。。
{{number.owner}
{{number.phone}

这是一种好的做法吗？如果没有，那么该如何改进呢？

就像你做的那样。 从vueJs的样式指南：

---

我不明白为什么这会成为一个问题。问题是，VueJS使用一个虚拟DOM，因此在运行时所做的所有更改都将集中/分块在一起，然后再将其写入实际的DOM树：）唯一的问题是（无论如何，您都没有这样做）。我建议的唯一优化是对外部v-if使用

，因为您只是将div用作占位符元素。将第二个v-if更改为v-else如何？当然。由于您要检查布尔值，因此使用

v-else

是有意义的，但这不应该改变它背后的计算工作量。我被这部分弄糊涂了：我建议的唯一优化是使用外部v-if，因为您只将div用作占位符元素。你能在代码上显示你的意思吗？使用

，这样就不会产生一个伪

元素。或者更好，只要