[vue] 常见用法之 v-for

我们使用vue，在对一组数组列表进行渲染的时，会使用到 v-for 指令。
v-for 指令使用 item in items 形式语法，items是源数据数组， item 是数组元素迭代的别名。

 <ul>
  <li v-for="item in items">
    {{ item.name}}
  </li>
</ul>

 data: {
    items: [
      { name: 'Foo' },
      { name: 'Bar' }
    ]
  }

结果:

v-for 还可以增加一个可选的第二个参数，为当前项的索引。

<ul>
  <li v-for="(item, index) in items">
	 {{ index }} - {{ item.name}}
  </li>
</ul>

 data: {
    items: [
      { name: 'Foo' },
      { name: 'Bar' }
    ]
  }
  

结果:

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

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

data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }

结果:

你也可以增加第二个参数作为键名

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

结果：

第三个参数为索引：

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

结果：

提示： 如果要列表中每条数据都有它的唯一性，我们可以在使用 v-for 时，结合 key来保证唯一性。
例如：

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>