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

最新推荐文章于 2024-07-24 12:54:56 发布

最初都是小白

最新推荐文章于 2024-07-24 12:54:56 发布

阅读量1.5w

点赞数 7

分类专栏： Vue 文章标签： v-for中key的作用 key key的使用方法

本文链接：https://blog.csdn.net/Originally_M/article/details/89916856

版权

Vue 专栏收录该内容

36 篇文章 3 订阅

订阅专栏

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>