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

Question

我想为每个 v-for 循环循环两个列表标签，而不循环 ul。 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 ，那么您需要将键分配给内部元素，因为模板无法被键控。

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