Question

我正在尝试在同一级别上彼此接连出现两个交替循环。如果我将其包装在父元素中并循环遍历，则会破坏样式。

以下是我要执行的操作的示例：

<div v-for="category in items" class="cat-name">{{ category.name }}</div>
<div v-for="category in items" class="cat-meta">{{ category.metaData }}</div>

想要的结果：

<div class="cat-name">name1</div>
<div class="cat-meta">metadata1</div>
<div class="cat-name">name2</div>
<div class="cat-meta">metadata2</div>
<div class="cat-name">name3</div>
<div class="cat-meta">metadata3</div>

以此类推...

我真的希望这是可能的，因为它在我尝试时完全破坏了样式：

<div v-for="category in items">
    <div class="cat-name">{{ category.name }}</div>
    <div class="cat-meta">{{ category.metaData }}</div>
</div>

非常感谢您的帮助和投入。谢谢-J

Answer 1

您可以将两个元素都包装在template tag中。
与基本标记不同，该标记不会在DOM中呈现。

<template v-for="category in items">
    <div class="cat-name">{{ category.name }}</div>
    <div class="cat-meta">{{ category.metaData }}</div>
</template>

在同一级别上交替使用v-for DOM元素

1 个答案: