在使用 v-for 的 VueJS 中，这种结构可能吗？答案

【问题标题】：In VueJS using v-for, is this structure possible?在使用 v-for 的 VueJS 中，这种结构可能吗？
【发布时间】：2020-04-10 07:56:21
【问题描述】：

给定组件数据中的对象集合：

data: function () {
  return [
    { id: 1, name: "foo", br: false },
    { id: 1, name: "bar", br: true },
    { id: 1, name: "baz", br: false }
  ]
}

...是否可以像这样渲染结构...

<div id="1">foo</div>
<div id="2">bar</div><div class="break" />
<div id="3">baz</div>

简而言之，我需要另一个 div 有条件地呈现在与列表中的项目相同的级别。如果它重要或有帮助，列表中的各个项目也是组件。我知道如何设置其余的数据和属性——它只是在我需要完成的列表中呈现额外的 HTML。

我想避免在列表中创建另一个项目和其他组件来表示中断。无需为简单的 HTML div 添加额外的 Vue 对象的开销。这个列表可能有超过 100 个项目和“中断”，并且可以快速加起来。

【问题讨论】：

标签： vue.js

【解决方案1】：

是的。您应该像这样遍历项目：

<template v-for="item in items">
  <div :id="item.id"> 
    {{ item.name }}
  </div>
  <div class="break" v-if="item.br">

  </div>
</template>

【讨论】：

据我了解，模板的根元素不能超过一个。
@jtalarico 您的理解是正确的。给出的示例将插入模板中的某处，而不是整个模板标签。尽管您可以拥有多个名为Fragments 的根元素。这是一个解释此类事情的链接：vuejsdevelopers.com/2018/09/11/vue-multiple-root-fragments

【解决方案2】：

你可以用一个普通的 v-for 和一个普通的 v-if 作为你的可选 div

<html>
<head>
  <script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
  </script>
  </head>
  <body>
     <div id="app">
         <div v-for="item in items">
             <div :id="item.id">{{item.name}}</div>
             <div  v-if="item.br" class="break">
        </div>
     </div>
     <script type = "text/javascript">
        var vue_det = new Vue({
        el: '#app',
        data: {
            items: [
            { id: 1, name: "foo", br: false },
            { id: 2, name: "bar", br: true },
            { id: 3, name: "baz", br: false }
          ]}
       });
      </script>
      </body>
  </html>

你不应该害怕 100 个左右的 div，像 Vue 这样的库可以有效地管理数千个组件

【讨论】：

这不会呈现我正在寻找的 HTML。它将每个项目与 break 一起包装在一个外部 div 中。
是的，但它只是一个容器 div。如果你不想要它，你可以使用 li 代替，但没有进一步的上下文，我看不出这种方法的缺点
它确实有效，但它增加了比我需要的更多的结构。特别是因为底层项目实际上是具有自己包装器的子组件。 Charlie 使用片段的方法更简洁一些。