一、什么是v-for指令

在Vue.js中，我们可以使用v-for指令基于源数据重复渲染元素。也就是说可以使用v-for指令实现遍历功能，包括遍历数组、对象、数组对象等。

二、遍历数组

代码示例如下：

    
         
         
             
                 
     
                
      
                    
       
下面的使用v-for遍历数组
                    
       
                          
        
只显示值
                          
        
                              
         
{
   {v}}
                          
        
                      
       
                      
       
                        
        
显示值和索引
                        
        
                            
         
值:{
   {v}},对应的索引:{
   {index}}
                        
        
                      
       
                
      
    
     

其中index表示数组的索引 

效果如下图所示：

注意：最新的版本中已经移除了$index获取数组索引的用法

三、遍历对象

代码示例如下：

    
         
         
             
                 
     
          
      
              
       
下面的使用v-for遍历对象
              
       
                    
        
只显示值
                    
        
                        
         
{
   {v}}
                    
        
                
       
                
       
                  
        
显示值和键
                  
        
                      
         
值:{
   {v}},对应的键:{
   {index}}
                  
        
                
       
          
      
    
     

 效果如下图所示：

 

四、遍历数组对象

代码示例如下：

    
         
         
             
                 
     
                
      
                
       
下面的使用v-for遍历数组对象
                
       
                      
        
只显示值
                      
        
                          
         
name值:{
   {list.name}},age值:{
   {list.age}}
                      
        
                  
       
                  
       
                    
        
显示值和键
                    
        
                        
         
name值:{
   {list.name}},age值:{
   {list.age}}, 对应的键:{
   {index}}
                    
        
                  
       
            
      
    
     

 效果如下图所示：