key属性的作用

斜阳下90

于 2022-11-26 12:06:21 发布

阅读量578

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_71213173/article/details/128050162

版权

一.key属性的作用

1. 提升v-for渲染的效率。

2. 提高渲染性能。

3.避免数据混乱的情况出现。

二.v-for中key作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="list.splice(1,0,{id:4,name:'扎堆'})">添加</button>
        <ul>
            <li v-for="item in list":key="item.arr">
                <input type="checkbox">
                <span>{{item.name}}</span>
            </li>
        </ul>
    </div>
    <!--
        现象：当我勾了夏娃，然后在下标1的位置添加了扎堆，结果发现勾了扎堆，夏娃自己没勾了。
        原因：v-for会尝试最大限度的复用当前元素，导致状态绑定错乱。
        解决：在v-for后加上一个key属性，key绑定这个数据的唯一值（一般是id,不能是字符串和数字类型）

    -->
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,name:'小霞'},
                    {id:2,name:'夏娃'},
                    {id:3,name:'王五'},
                ]
            }
        })
    </script>
</body>
</html>

效果：当我勾了夏娃