Vue2.0 列表渲染（译）

v-for

我们用v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

基本用法

    

      {{ item.message }}
    

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

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

  

    {{ parentMessage }} - {{ index }} - {{ item.message }}
  

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

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

Template v-for

如同 v-if 模板，你也可以用带有 v-for 的