v-for中的key值的作用

最新推荐文章于 2023-11-04 23:35:38 发布

LabeLyz

最新推荐文章于 2023-11-04 23:35:38 发布

阅读量123

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/m0_51400347/article/details/116433024

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

首先我们来看一段代码：

<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"> {{item.name}}
            </li>
        </ul>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            newId: 3,
            list: [
                { id: 1, name: 'HTML' },
                { id: 2, name: 'CSS' },
                { id: 3, name: 'JavaScript' }
            ]
        },
        methods: {
            add() {
                this.list.unshift({ id: ++this.newId, name: this.name })
                this.name = ''
            }
        }
    });
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZTJpB7T3-1620232946759)(C:\Users\16081\AppData\Roaming\Typora\typora-user-images\image-20210504185149391.png)]$

这里我们没有加key，我们勾选CSS，然后添加一个新的数据

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5EhY4kSm-1620232946762)(C:\Users\16081\AppData\Roaming\Typora\typora-user-images\image-20210504185252430.png)]$

这里我们可以发现，CSS并没有被选中，而是HTML被选中了

我们可以这样理解：key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确，更快的找到对应的vnode节点，如果没有加key，就容易发生像上面这样的Bug

LabeLyz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-for中的key值的作用

首先我们来看一段代码：<body> <div id="app"> <div> <input type="text" v-model="name"> <button @click="add">添加</button> </div> <ul> <li v-for="item in li
复制链接

扫一扫