v-for中为什么要有key属性

最新推荐文章于 2024-07-17 23:14:03 发布

我是赵姑娘

最新推荐文章于 2024-07-17 23:14:03 发布

阅读量2.7k

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/xllfy123/article/details/92134551

版权

VUE 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

v-for中为什么要有key属性？？？

这是听一个视频中讲的，之前一直不太明白key是干嘛用的

当vue中使用v-for正在更新已经渲染过的元素序列时，它默认用“就地复用”策略，如果数据项的顺序被改变，vue不是移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素

我们来举一个例子

<body>
    <div id="app">
      <label >count:</label><input type="text" v-model="count">
      <label >name:</label><input type="text" v-model="name">
      <input type="button" value="添加" @click="add">
      <div v-for="item in list">
          <input type="checkbox">{{item.count}}---{{item.name}}
      </div>
    </div>
    
    <script>
        var vm=new Vue ({
            el: '#app',
            data: {
                count:'',
                name:'',
               list:[
                   {count:1001,name:'aaa'},
                   {count:1002,name:'bbb'},
                   {count:1003,name:'ccc'},
                   {count:1004,name:'ddd'},
                   {count:1005,name:'eee'}
               ]
            },  
            methods: {
                add () {
                    let p={
                        count:this.count,
                        name:this.name
                    }
                    this.list.unshift(p)
                }
            }
        })
    </script>

在这里插入图片描述
当点击添加的时候会在顶部添加一条数据
在没有key属性的情况下，我们选中1005这一条数据，并且添加一条1006的数据，结果就会变成这样:

让我们加入key属性

<div v-for="item in list" :key="item.count">
     <input type="checkbox">{{item.count}}---{{item.name}}    
</div>

在这里插入图片描述
注意

v-for循环的时候，key属性只能使用number/string
key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值

我是赵姑娘

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录