v-for 带条件元素，不带 答案

【问题标题】：v-for with conditional element, without v-for 带条件元素，不带 
【发布时间】：2020-08-13 10:27:34
【问题描述】：

我在其他问题中找不到我的问题的答案，所以决定发布我自己的问题。

首先，我知道您应该在循环遍历数组之前对其进行过滤。但就我而言，给我带来麻烦的不是数组本身。

在我的例子中，我正在遍历一个包含产品的数组。这呈现了我的组件。现在每个 xx 产品我想在产品组件之间呈现一个促销文本。

所以我的代码：

<template v-for="(product, index) in products">
<product>
<promotion v-if="showOnIndex(index)">
</template>

现在我的问题是，这是要走的路吗？

当代码呈现时，它会在每个产品之后输入，这是否会影响 Google 在进行审核时计算的节点数？

有没有办法防止空评论标签？

【问题讨论】：

【解决方案1】：

我认为您无法更改 v-if 下的错误条件的行为。原因也可以查看这个thread。

如果您使用v-show，您将删除空标签，但所有产品都有促销节点。

解决此问题的一种方法是为产品添加 2 个组件：

并使用:is在它们之间切换

<template v-for="(product, index) in products">
 <component :is="showOnIndex(index)? 'product' : 'productWithPromotion'" />
</template>

【讨论】：