Vue的列表渲染指令

列表渲染指令 v-for

当需要将一个数组便利或者枚举一个对象循环显示时，就会用到列表渲染指令  v-for。

它的表达式需要结合in 来使用，类似于item in items的形式。

 
  
  
  
  
  
  
 
 
  

  

   
{{book.name}}
  
 


 

 

在表达式中，books是数据，book是当前元素的别名，循环出的每个

元素内的元素都可以访问到

对应的当前数据book

列表渲染也支持用of 代替in 作为分隔符

   
{{book.name}}

v-for的表达式支持一个可选参数作为当前项的索引：

 

  

   
{{index}}-{{book.name}}
  
 


 

除了数组外，对象的属性也是可以遍历的：

  

   {{value}}

  
 

var app1= new Vue({
  el:'#app1',
  data:{
   user:{
    name:'badao',
    age:22,
    tel:11111111
   }
  }

v-for还可以迭代整数：

  {{n}}
 

var app3 = new Vue({
  el:'#app3'
 })