Vue.js列表渲染指令v-for

目录

一、原理概述

二、基本用法

（1）v-for循环普通数组

（2）v-for循环对象

（3）v-for循环对象数组

（4）v-for迭代整数 

---

一、原理概述

        v-for指令时在模板编译的代码生成阶段实现的，当遍历数组或对象时需要使用列表渲染指令v-for。当Vue.js用v-for正在更新已渲染过的元素列表时，它默认用"就地复用"策略。如果数据项的数据被改变，Vue.js将不再移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并确保它在特定索引下显示已被渲染过的每个元素。

二、基本用法

        v-for是Vue.js的循环语句，它的表达式需要结合着in或者of来使用，类似item in items的形式。

（1）v-for循环普通数组

示例：

    
    
    
    
    
    



    

        
v-for遍历数组
        

            

                {{index}}------{{item}}
            
        

    
    

执行结果：

        在表达式中，lists是数组，item是当前一条数据，index代表当前索引值。列表渲染也可以用in来代替of作为分隔符。代码中还有一个key属性，key属性可以提高循环的性能。

（2）v-for循环对象

示例：

    
    
    
    
    
    



    

        
v-for遍历对象
        

            

                {{index}}-----{{name}}------{{value}}
            
        

    
    

执行结果：

（3）v-for循环对象数组

示例：

    
    
    
    
    
    



    

        
v-for遍历对象数组
        

            

                {{index}}-----{{item.id}}-----{{item.name}}-----{{item.age}}
            
        

    
    

执行结果：

（4）v-for迭代整数 

示例：

    
    
    
    
    
    



    

        
v-for迭代整数
        

            

                {{count}}
            
        

    
    

执行结果：