如何在不创建 DOM 条目的情况下进行 v-for ？

Question

我有一些数据想在 CSS 网格中呈现。最终结果应该是

<div>hello 1</div><div>hello 2</div>
<div>bonjour 1</div><div>bonjour 2</div>

我设想通过 a 创建网格v-for，迭代从某处接收的数据（在下面的示例中，它由 Array 表示['hello', 'bonjour']）。我的问题是迭代创建了一个额外的<div>包含我感兴趣的两个元素：

<div v-for="for word in ['hello', 'bonjour']">
<div>{{word}} 1</div><div>{{word}} 2</div>
</div>

结果是

<div><div>hello 1</div><div>hello 2</div></div>
<div><div>bonjour 1</div><div>bonjour 2</div></div>

有没有一种方法可以在不创建额外元素的情况下迭代迭代器？

在伪代码中，这会是这样的

<this-element-is-not-added-to-the-DOM-but-just-manages-the-word-variable v-for="for word in ['hello', 'bonjour']">
<div>{{word}} 1</div><div>{{word}} 2</div>
</this-element-is-not-added-to-the-DOM-but-just-manages-the-word-variable>

Answer 1

您可以将其包装在template：

new Vue({ el: "#app" });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <template v-for="word in ['hello', 'bonjour']">
    <div>{{word}} 1</div><div>{{word}} 2</div>
  </template>
</div>