2020/5/10 v-for循环遍历 key的作用

最新推荐文章于 2024-04-20 03:13:30 发布

指尖钢琴家

最新推荐文章于 2024-04-20 03:13:30 发布

阅读量253

点赞数

文章标签： javascript vue.js html5

本文链接：https://blog.csdn.net/qq1547511739/article/details/106040969

版权

v-for的语法类似于JavaScript中的for循环。
格式：item in items的形式。

如果在遍历的过程中，我们需要拿到元素在数组中的索引值
语法格式：v-for=(item, index) in items
其中的index就代表了取出的item在原数组的索引值。

组件key属性
找到正确的位置区插入新的节点
key的作用主要是为了高效的更新虚拟DOM
key作用图解
kye
在这里插入图片描述

<body>
<div id="opp">
<!-- 循环普通数组 -->
<p v-for='(item,index) in list'>索引值：{{index}}-----每一项：{{item}}</p></br>
<!-- 循环对象数组 -->
<p v-for='user in list1'>{{user.id}}-----{{user.name}}----{{user}}</p></br>
<!-- 循环对象 -->
<p v-for ='(val,key,i) in list2'>值是：{{val}}---键是：{{key}}----索引{{i}}</p></br>
<p v-for='count in 5'>这是第{{count}}次循环</p>
</div>
</body>
<script>
    const vm = new Vue({
        el:'#opp',
        data:{
            list:[1,2,3,4,5],
            
            list1:[
                {id:01,name:'wan'},
                {id:02,name:'jia'},
                {id:03,name:'peng'},
            ],
            list2:{
                id:01,
                name:'wanjiapeng',
                xinbie:'nan'
            }
        }
    })

指尖钢琴家

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020/5/10 v-for循环遍历 key的作用

v-for的语法类似于JavaScript中的for循环。格式：item in items的形式。如果在遍历的过程中，我们需要拿到元素在数组中的索引值语法格式：v-for=(item, index) in items其中的index就代表了取出的item在原数组的索引值。...
复制链接

扫一扫