在同一层交替 v-for DOM 元素

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 元素

Alternating v-for DOM elements on same level

vue.js

v-for