Vue 列表渲染

v-for 把一个数组对应为一组元素

用 v-for 指令根据一组数组的选项列表进行渲染。

v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组，item 是数组元素迭代的别名。

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

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

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {
  { parentMessage }} - {
  { index }} - {
  { item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：

<div v-for="item of items"></div>

一个对象的 v-for

你也可以用 v-for 通过一个对象的属性来迭代。

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {
  { value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

你也可以提供第二个的参数为键名：

<div v-for="(value, key) in object">
  {
  { key }}: {
  { value }}
</div>

还可以提供第三个参数为索引：

<div v-for="(value, key, index