带有标签组合的 Vuejs v-for 循环

Question

我想在不循环 ul 的情况下为 v-for 的每个循环循环两个列表标记。 vuejs 中是否有可用的内部循环来通过循环来转义 ul 标记，或者是否有任何其他方法。

<ul id="example-1" v-for="(item, index) in items" :key="item.message">
  <li >
    {{ item.message }}
  </li>
  <li>
   {{ item.text}}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo', text: "baz" },
      { message: 'Bar', text: "quz" }
    ]
  }
})

我能得到的明显结果是：

福

酒吧

巴兹

提问

我需要的结果：

福

巴兹

酒吧

提问

Answer 1

您可以在 <template> 标签上循环。

<ul id="example-1">
  <template v-for="item in items">
    <li>
      {{ item.message }}
    </li>
    <li>
     {{ item.text}}
    </li>
  </template>
</ul>

如果您正在使用 Vue <= 2.x，那么您将需要为内部元素分配键，因为模板无法键控。

如果您正在使用 Vue 3.x，那么您应该为 <template> 分配一个键。这是早期版本的 breaking change。

带有标签组合的 Vuejs v-for 循环

Vuejs v-for loop with tag combination

vue.js

v-for