创新互联VUE2教程：Vue.js2.0列表渲染

v-for

成都创新互联自2013年起，先为永登等服务建站，永登等地企业，进行企业商务咨询服务。为永登企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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

基本用法

  

    {{ item.message }}
  

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

结果：

 
 
 

  
  
  
Foo
  
  
  
Bar
 
 
 

在 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
 
 
 

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

Template v-for

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