vue4 v-for的四种用法

最新推荐文章于 2024-07-18 18:59:22 发布

融图

最新推荐文章于 2024-07-18 18:59:22 发布

阅读量1.6k

点赞数

分类专栏： vue 文章标签： vue v-for

本文链接：https://blog.csdn.net/xiangyang_csii/article/details/88369490

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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的值是多个数组时，使用[]将每一个{}包起来

<p v-for="item in list2" :key="item.id">
            list2------{{item.id}}---------{{item.name}}----------{{item.date}}
</p>



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

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

<p v-for="item in list1">
            list1------{{item}}
 </p>

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

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

<p v-for="(key,value,item) in list1">
            list(key,value,item)
            ------value:{{value}}
            -------key:{{key}}
            --------item{{item}}
 </p>

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

        <p v-for="item in ['1','2',3]">
            list直接------{{item}}
        </p>

下面为v-for的用法代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="./lib/vue.min.js"></script>

</head>
<body>
    

    <div id="app">

         <p v-for="item in list1">
            list1------{{item}}
        </p>

        

        <p v-for="item in 10">
            list in 10------{{item}}
        </p>

        <p v-for="(key,value,item) in list1">
            list(key,value,item)------value:{{value}}-------------key:{{key}}-------------item{{item}}
        </p>



        <p v-for="item in ['1','2',3]">
            list直接------{{item}}
        </p> 


        <input type="text" v-model="id">
        <input type="text" v-model="name">
        <input type="button" value="添加" @click="add">
        <p v-for="item in list2" :key="item.id">
            <input type="checkbox" name="" id="">
            list2------{{item.id}}---------{{item.name}}----------{{item.date}}
        </p>

    </div>




    <script>

       var vm = new Vue({
           el:'#app',
           data:{
               id:'',
               name:'',
               list1:{
                   id:1,
                   name:'丽丽',
                   date:new Date()
               },
               list2:[{
                   id:1,
                   name:'丽丽',
                   date:new Date()
               },
               {
                   id:2,
                   name:'冬冬',
                   date:new Date()
               }]
           },
           methods:{
               add(){
                  this.list2.push({id:this.id,name:this.name,date:new Date()})
                  this.list2.unshift({id:this.id,name:this.name,date:new Date()})
               }
           }
       })

       
    
    </script>
</body>
</html>