v-for中的key属性(在组件或者直接使用v-for还会出现bug时)

技术文章 7个月前 完美者
1,889 0

标签:场景   NPU   lan   color   gif   char   box   str   ack   

bug图:选中id为5的元素,在最上添加元素后,变成了选中id为4的元素

技术图片

bug源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p v-for="item in roles">
        <input type="checkbox">{{item.id}}--{{item.name}}
    </p>
    id:<input type="text" v-model="id">
    name: <input type="text" v-model="name">
    <button @click="add">添加</button>
</div>
<script src="../JS/Vue.js"></script>
<script>
    new Vue({
        el:#app,
        data:{
            roles:[
                {id:1,name:雪之下雪乃},
                {id:2,name:由比滨结衣},
                {id:3,name:一色彩羽},
                {id:4,name:川崎沙希},
                {id:5,name:雪之下阳乃},
            ],
            id:‘‘,
            name:‘‘,
        },
        methods:{
            add:function () {
                this.roles.unshift({id:this.id,name:this.name})
            }
        }
    })
</script>
</body>
</html>

 

 

 

使用key属性标注之后

技术图片

 

修改后的源码以及解释说明

<!--
 1、key属性的作用
 用来标注v-for循环的每一项的唯一身份

 2、key属性的使用注意
 key属性值只能是数字或者字符串
 key属性必须用v-bind来绑定

 3、key属性的使用场景
 在组件或者一些直接v-for循环会有bug的场景
 推荐v-for循环都带上key属性
 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--    key的属性值必须是字符串或者数字(此处id不易重复,所以选取id)-->
    <p v-for="item in roles" v-bind:key="item.id">
        <input type="checkbox">{{item.id}}--{{item.name}}
    </p>
    id:<input type="text" v-model="id">
    name: <input type="text" v-model="name">
    <button @click="add">添加</button>
</div>
<script src="../JS/Vue.js"></script>
<script>
    new Vue({
        el: #app,
        data: {
            roles: [
                {id: 1, name: 雪之下雪乃},
                {id: 2, name: 由比滨结衣},
                {id: 3, name: 一色彩羽},
                {id: 4, name: 川崎沙希},
                {id: 5, name: 雪之下阳乃},
            ],
            id: ‘‘,
            name: ‘‘,
        },
        methods: {
            add: function () {
                this.roles.unshift({id: this.id, name: this.name})
            }
        }
    })
</script>
</body>
</html>

推荐v-for循环都带上key属性!!!

v-for中的key属性(在组件或者直接使用v-for还会出现bug时)

标签:场景   NPU   lan   color   gif   char   box   str   ack   

原文地址:https://www.cnblogs.com/Yuigahama-Yui/p/13647003.html

版权声明:完美者 发表于 2020-09-17 21:01:21。
转载请注明:v-for中的key属性(在组件或者直接使用v-for还会出现bug时) | 完美导航

暂无评论

暂无评论...