vue.js - 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 <= 2.x，那么您将需要为内部元素分配键，因为模板无法设置键。

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