Question

我想在 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>

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>

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

1 个答案: