在这个例子中,我们应该如何处理 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 条目没有视频,我也需要渲染图像。
这没什么大不了的,我找到了解决方案,但我想知道处理这个问题的最佳方法。
最佳答案
我认为您误解了文档。在这种情况下,同时使用 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>
关于javascript - 在 Vue 中使用 v-for 处理 v-if 的正确方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54518609/