v-for

可以使用 v-for 指令基于一个数组渲染一个列表。这个指令使用特殊的语法，形式为 item in items，items 是数据数组，item 是当前数组元素的别名：

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

js代码：

var example1 = new Vue({
  el: '#example',
  data: {
    items: [
      { message: 'one' },
      { message: 'two' }
    ]
  }
})

在 v-for 块内我们能完全访问父组件作用域内的属性，另有一个特殊变量 $index，正如你猜到的，它是当前数组元素的索引：

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

js代码：

var example2 = new Vue({
  el: '#example',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'one' },
      { message: 'two' }
    ]
  }
})