v-for中key的作用：为什么使用v-for时必须添加唯一的key属性

key的作用： key是为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一的key属性。先来举个例子：一、没有加key：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name=...

最初都是小白

15432人浏览 · 2019-05-07 15:24:08

最初都是小白 · 2019-05-07 15:24:08 发布

key的作用：

key是为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一的key属性。

先来举个例子：

在这里插入图片描述

一、没有加key：

<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
</head>
<body>
    <div id="app" >
        <div>
            <input type="text" v-model="name" >
            <button @click="add">添加</button>
        </div>
        <ul>
            <li v-for="item in list">
                <input type="checkbox">ID：{{item.id}} -------name：{{item.name}}
            </li>
        </ul>
    </div>
<script>
    var vm = new Vue({
            el:'#app',
            data:{
                name: '',
                list: [
                    { id:0,name:'小美子1号' },
                    { id:1,name:'小美子2号' },
                    { id:2,name:'小美子3号' }
                ]
            },
            methods:{
                add() {
                     //    1.拼接处一个完整的用户信息对象，包含ID 和name
                    const newUser= {id: this.list.length,name: this.name};
                    //    2.把拼接出来的用户信息对象 调用this.list.unshift方法把对象追加到数组的第一个
                    this.list.unshift(newUser);
                }
            }
    })
</script>
</body>
</html>

没有加key的时候，当我选中第二个“小美子2号”后，再添加小美子4号时：

在这里插入图片描述

则会出现问题：

选中的变成了“小美子3号”，位置依旧是第二个，很显然这不是我们想要的结果，解决这个问题的方法就是加key属性

在这里插入图片描述

二、加上key：

<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
</head>
<body>
    <div id="app" >
        <div>
            <input type="text" v-model="name" >
            <button @click="add">添加</button>
        </div>
        <ul>
            <!-- 注意：key的取值必须是number 或 string，不能是对象 -->
            <!-- 而且 使用 v-for 循环的每一项的值，都要保证唯一性 -->
            <!-- 今后，只要使用 v-for循环，就必须为循环的每一项，添加 :key  属性绑定 -->
            <li v-for="item in list" :key="item.id">
                <input type="checkbox">ID：{{item.id}} -------name：{{item.name}}
            </li>
        </ul>
    </div>
<script>
    var vm = new Vue({
            el:'#app',
            data:{
                name: '',
                list: [
                    { id:0,name:'小美子1号' },
                    { id:1,name:'小美子2号' },
                    { id:2,name:'小美子3号' }
                ]
            },
            methods:{
                add() {
                     //    1.拼接处一个完整的用户信息对象，包含ID 和name
                    const newUser= {id: this.list.length,name: this.name};
                    //    2.把拼接出来的用户信息对象 调用this.list.unshift方法把对象追加到数组的第一个
                    this.list.unshift(newUser);
                }
            }
    })
</script>  
</body>
</html>

加上key以后，当我选中第二个“小美子2号”后，再添加小美子4号时：

在这里插入图片描述

上边出现的问题解决了，选中的依然是“小美子2号”：

在这里插入图片描述

注意：key的取值必须是number 或 string，不能是对象，而且使用 v-for 循环的每一项的值，都要保证唯一性。

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}$/, //不连续的两位字母// /^