Vue学习笔记（四）——v-for的key

参考文档：https://cn.vuejs.org/v2/guide/当使用v-for遍历数组时，如果没有指定key，则当数组元素顺序发生变更时，dom绑定的数据会更新，而dom本身的顺序不会变化；如果指定了key，则当数组元素顺序发生变更时，dom会和数据同步更新。下面用一个简单的例子来说明：<!DOCTYPE html><html lang="en"><h...

讨厌走开啦

4930人浏览 · 2019-03-18 23:34:16

讨厌走开啦 · 2019-03-18 23:34:16 发布

参考文档：https://cn.vuejs.org/v2/guide/

当使用v-for遍历数组时，如果没有指定key，则当数组元素顺序发生变更时，dom绑定的数据会更新，而dom本身的顺序不会变化；如果指定了key，则当数组元素顺序发生变更时，dom会和数据同步更新。下面用一个简单的例子来说明：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="keyTest">
    <span id="unchange">dom未重新渲染</span>
    <div v-for="item in items">
        <span>{{item.message}}</span>
    </div>
    <span id="change">dom有重新渲染</span>
    <div v-for="item in items" :key="item.id">
        <span>{{item.message}}</span>
    </div>
    <button type="button" @click="changeOrder">changeOrder</button>
</div>
</body>
<script>
    new Vue({
        el: '#keyTest',
        data: {
            items: [
                {message: 'Foo', id: "1"},
                {message: 'Bar', id: "2"}
            ]
        },
        mounted: function () {
            document.getElementById("unchange").nextElementSibling.style.color = "red";
            document.getElementById("change").nextElementSibling.style.color = "red";
        },
        methods: {
            changeOrder: function () {
                let newItems = [];
                newItems.push(this.items[1]);
                newItems.push(this.items[0]);
                this.items = newItems;
            }
        }
    });
</script>
</html>

例子包含2个v-for循环，一个不包含key，一个包含key；初始化时会对列表的第一个元素加一个颜色的样式；然后点击按钮触发数组顺序变更，可以看到不包含key的v-for仍然是第一个元素为红色（即dom本身的顺序没有变化），而包含key的v-for则是第二个元素为红色（即dom的顺序发生了变化）：
在这里插入图片描述

v-for不指定key的应用场景相对较少，多应用于需要高亮显示按条件排序后的前xx条数据（比如需要高亮显示收入排名前三位的职业，然后触发了倒序重排，需要高亮显示收入排名后三位的职业）。

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