列表渲染

基本用法

我们用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' }
    ]
  }
})
// 渲染出Foo  Bar

v-for还支持一个可选的第二个参数index为当前项的索引：

<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' }
    ]
  }
})
// 渲染结果： Parent-0-Foo  Parent-1-Bar

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

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

对象迭代

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

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

new Vue({
  el: '#repeat-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})
// 遍历出对象属性值： John Doe 30

也可以提供第二个的参数key为键名（属性名），第三个参数index为索引：

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

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

v-for 和 v-if

v-if用于条件渲染，当它们处于同一节点，v-for的优先级比v-if更高，这意味着v-if将分别重复运行于每个v-for循环中。
如果你的目的是有条件地跳过循环的执行，那么将v-if置于包装元素 或<template>上。如:

<ul v-if="shouldRenderTodos">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>