Vue,v-for循环遍历方式

Vue,v-for循环遍历方式

  1.v-for循环普通数组

     item是自定义名称， in后面加的是 list这个普通数组

 1 
 2 
 3     
 4         
 5         
 6     
 7     
 8     
 9         

10             
{{ list }}
11 
12             
{{ item }}
13             
14             
 索引值:{{ i }}  --- 每一项:{{ item }}
15         
16     
17 
18 

   效果图

　

 

  2.v-for循环对象数组

 1 
 2 
 3     
 4         
 5         
 6     
 7     
 8     
 9         

10             
11             
12             
{{ user.id }} --- {{user.name}}
13             
14             =======================================================================
15             
16             
Id:{{user.id}} --- name:{{user.name}} --- 索引:{{i}}
17         
18     
19 
20 

 

   效果图

    

 

  3.v-for循环对象

　　demo因为没有写下方的（val, key, i），所以只能遍历出val， 不能遍历出key和i

　　其实这个demo就是val，只不过写法不一样

 1 
 2 
 3     
 4         
 5         
 6     
 7     
 8     
 9         

10             
11             
 demo:{{ demo }} 
12             
13             ====================================
14             
15             
16             
 值 val:{{ val }} ---  键 key:{{ key }} --- 索引 i:{{ i }}
17         
18     
19 
20 

 

 

   效果图

    

　4.v-for迭代数字

 　　因为直接循环的 p标签里的数字10，所以data里不需要写数字

 1 
 2 
 3     
 4         
 5         
 6     
 7     
 8     
 9         

10             
11             
12             
 这是第 {{ count }} 次循环
13         
14     
15 
16 

 

  效果图

 

 

 

2019-06-10 16:14:44