vue4 v-for的四种用法

v-for

1.对data的数组信息进行遍历
:key为每次遍历定义唯一key值
list[{
id:id1,
name:name1},
{
id:id2,
name:name2},
]

this.list2.push({id:this.id,name:this.name,date:new Date()}) push直接在数组后面添加
this.list2.unshift({id:this.id,name:this.name,date:new Date()}) unshift在数组前方添加

list的值是多个数组时，使用[]将每一个{}包起来

            list2------{{item.id}}---------{{item.name}}----------{{item.date}}




 list2:[{
                   id:1,
                   name:'丽丽',
                   date:new Date()
               },
               {
                   id:2,
                   name:'冬冬',
                   date:new Date()
               }]

2.对data中的对象进行遍历

            list1------{{item}}
 

3.对data中的对象的键值进行遍历

需要注意提取数据时是key,value,item，返回的数值顺序为value,key,item

            list(key,value,item)
            ------value:{{value}}
            -------key:{{key}}
            --------item{{item}}
 

4.直接在标签内定义数组进行遍历

        

            list直接------{{item}}
        

下面为v-for的用法代码

    
    
    
    

    



    

    


         

            list1------{{item}}
        

        

        

            list in 10------{{item}}
        

        

            list(key,value,item)------value:{{value}}-------------key:{{key}}-------------item{{item}}
        



        

            list直接------{{item}}
        
 


        
        
        
        

            
            list2------{{item.id}}---------{{item.name}}----------{{item.date}}