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>. 与早期版本相比，这是一个重大变化。