v-for列表渲染

一、v-for迭代数组

   编号{{index+1}} 名字{{e.name}} 年龄{{e.age}}

• e 是循环数组中的每个元素的别名
• index 是当前循环的下表，从0开始
• :key 的作用： 是为了给 Vue 一个提示， 以便它可以跟踪每个节点的唯一标识，它会 基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素==

运行效果如下：

二、v-for 迭代对象

     第{{index+1}} 个属性为：{{key}} ={{value}}

 value是属性值，key是属性名，index索引值（从0开始）,运行效果如下：

 注意：循环的属性顺序在不同js引擎是不一定的，Object.keys()

三、v-if和v-for同时使用时（注意）

需求：  如果年龄大于6666不显示

不推荐v-if和v-for同时作用到同一元素上

作用在同一元素上：

•      vue3: 会先执行v-if,再执行v-for
•      vue2: 会先执行v-for,再执行v-if
•      因为vue3和vue2执行的顺序不相同，不推荐v-if和v-for同时作用到同一元素上，使用在同一元素上会报如下错误：vue.global.js:1661 [Vue warn]: Property "e" was accessed during render but is not defined on instance. 

解决方式：分开使用，不作用同一元素上

eg:           

   *在template元素上循环，循环出来html查看不到template，会自动移除它

完整代码例子：

    
    
    


    

        
v-for迭代数组
        
        

            编号{{index+1}} 名字{{e.name}} 年龄{{e.age}}
        
        
v-for 迭代对象
        
        

            第{{index+1}} 个属性为：{{key}} ={{value}}
        
        
v-if和v-for同时使用时（注意）