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

v-for中为什么要有key属性？？？这是听一个视频中讲的，之前一直不太明白key是干嘛用的当vue中使用v-for正在更新已经渲染过的元素序列时，它默认用“就地复用”策略，如果数据项的顺序被改变，vue不是移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素我们来举一个例子<body><div id="ap...

我是赵姑娘

2789人浏览 · 2019-06-15 18:04:22

我是赵姑娘 · 2019-06-15 18:04:22 发布

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的值

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^