在 Vue 中使用 v-for 处理 v-if 的正确方法答案

【问题标题】：Correct way to handle v-if with v-for in Vue在 Vue 中使用 v-for 处理 v-if 的正确方法
【发布时间】：2019-06-28 08:08:34
【问题描述】：

在这个例子中，我们应该如何处理 v-for 和 v-if 的组合：

这里是我的data.json：

[
  {
    image: 'foo.jpg'
  },
  {
    image: 'foobar.jpg',
    video: 'bar.mp4'
  },
  {
    image: 'barfoo.jpg'
  }
]

在我的 vue 模板中，我想渲染如下内容：

<div v-for="(item, key, index) in data" : key="index">
   <img :src="item.image">
   <video v-if="!!item.video" :src="item.video"></video>
</div >

但是作为documentation say，我们应该避免v-if 和v-for，而是使用计算值。但是即使 json 条目没有视频，我也需要渲染图像。

这没什么大不了的，我找到了解决方案，但我想知道处理这个问题的最佳方法。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

我认为您误解了文档。在这种情况下，同时使用v-for 和v-if 是有意义的，因为您总是至少会渲染<img>，并且您可能会渲染<video>。该文档试图表明，如果 v-if 和 v-for 位于完全相同的元素上，您应该预先过滤项目列表。

文档显示的示例试图让您将仅显示 3 个总元素中的 2 个的列表缩减为仅 2 个元素，并让计算的道具告诉您何时有更多元素。否则每次需要重新渲染时都必须遍历整个列表。

考虑这种差异：

// An array of 1000 items but only 1 has a video element
const data = [0...999];

data.push({
  image: "some.jpg",
  video: "some.mp4"
});

<!--
We always render 1000 items but only some will have video 
-->
<div 
v-for="(item, key, index) in data" 
:key="index">
  <img :src="item.image">
  <video v-if="!!item.video" :src="item.video"></video>
</div>


<!-- 
We have to visit 1000 elements but 
only 1 will actually end up rendering
-->
<div 
v-if="!!item.video" 
v-for="(item, key, index) in data" 
:key="index">
  <img :src="item.image">
  <video :src="item.video"></video>
</div>

【讨论】：