如何在不创建 DOM 条目的情况下进行 v-for？ [复制]答案

【问题标题】：How to v-for without creating a DOM entry? [duplicate]如何在不创建 DOM 条目的情况下进行 v-for？ [复制]
【发布时间】：2021-10-01 03:43:54
【问题描述】：

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

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

我设想通过v-for 创建网格，迭代我从某个地方收到的数据（在下面的示例中，它由数组['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>

【问题讨论】：

发帖前请search thoroughly。更多关于搜索here.
@T.J.Crowder：老实说，我没有搜索。为什么？因为我使用 Vue 多年并且来回阅读文档，所以我有“为什么没有人遇到这个问题？”尤里卡时刻，真的是傲慢到想象我会是第一个:)
大声笑 :-D 我从来没有做过这样的事... :;-)

标签： javascript vue.js

【解决方案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>

【讨论】：