Vue.js中v-for指令怎么用

这篇文章给大家分享的是有关Vue.js中v-for指令怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

一、什么是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}}
                    
                  
            
    

效果如下图所示：

感谢各位的阅读！关于"Vue.js中v-for指令怎么用"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！