Vue的:key用法及示例

最新推荐文章于 2024-05-28 11:44:38 发布

conquer_galaxy

最新推荐文章于 2024-05-28 11:44:38 发布

阅读量1k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/conquer_galaxy/article/details/129773526

版权

在 Vue 中，使用 v-for 指令循环遍历数组或对象时，每个子元素都需要绑定一个唯一的 key 值，用于标识这个子元素。我们可以使用 :key 属性来绑定这个 key 值。例如：

<div v-for="item in itemList" :key="item.id">{{ item.name }}</div>

在这个例子中，我们使用 v-for 循环遍历了一个名为 itemList 的数组，然后为每个子元素绑定了一个唯一的 key 值，即 item.id。这样，在更新视图时，Vue 就能够根据这个 key 值来判断哪些元素是新增加的，哪些元素是被删除的，哪些元素需要更新，从而提高了渲染效率。

值得注意的是，key 值必须是唯一的、稳定的，并且不推荐使用随机数或者索引作为 key 值。如果使用随机数或者索引作为 key 值，会导致更新时出现问题，因为它们可能在不同的渲染周期中生成相同的值。正确的做法应该是使用一个稳定的唯一标识符，比如数据库中的 ID 值或者其他全局唯一的标识符。

总之，:key 属性是 Vue 中一个非常重要的属性，用于标识每个子元素的唯一性，确保渲染效率和正确性

<!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">
        <div>
            <input type="text" v-model="name">
            <button @click="addNewUser">添加</button>
        </div>

        <ul>
            <li v-for="user in userlist" :key="user.id">
                <input type="checkbox">
                姓名：{{user.name}}
            </li>
        </ul>

    </div>

    <script src="./lib/vue-2.6.14.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                userlist: [
                    { id: 1, name: "paprika" },
                    { id: 2, name: "white" },
                ],
                presentId: 2,
                name: "",
            },
            methods: {
                addNewUser() {
                    this.presentId++
                    this.userlist.push({ id: this.presentId, name: this.name })
                }
            }

        })
    </script>
</body>

</html>

conquer_galaxy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的:key用法及示例

值，会导致更新时出现问题，因为它们可能在不同的渲染周期中生成相同的值。正确的做法应该是使用一个稳定的唯一标识符，比如数据库中的 ID 值或者其他全局唯一的标识符。值来判断哪些元素是新增加的，哪些元素是被删除的，哪些元素需要更新，从而提高了渲染效率。属性是 Vue 中一个非常重要的属性，用于标识每个子元素的唯一性，确保渲染效率和正确性。指令循环遍历数组或对象时，每个子元素都需要绑定一个唯一的。值必须是唯一的、稳定的，并且不推荐使用随机数或者索引作为。的数组，然后为每个子元素绑定了一个唯一的。
复制链接

扫一扫