深入理解vue.js2.0指令v-for使用及索引获取

                      

                         深入理解vue.js2.0指令v-for使用及索引获取  

   v-for

                   

               基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名：                

  {{ item.text }}

              另外也可以为数组索引指定别名（或者用于对象的键）：

              v-for  默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素,您需要提供一个  key  的特殊属性:

  {{ item.text }}

  索引

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

  

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

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

结果：

   .Parent - 0 -Foo

   .Parent - 1 -Bar

注意：在2.0版是1~10中，$index已废除，索引 (item,index)。

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

  Template v-for

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