v-for中key的使用注意事项

最新推荐文章于 2024-06-27 14:44:32 发布

star9595

最新推荐文章于 2024-06-27 14:44:32 发布

阅读量139

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/u014042372/article/details/105176188

版权

vue 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合练习</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
    <label>
        ID:
        <input type="text" v-model="id">
    </label>
    <label>
        Name:
        <input type="text" v-model="name">
    </label>
    <input type="button" value="添加" @click="add">
    <p v-for="item in list" :key="item.id">
        <input type="checkbox">
        id: {{item.id}}=====name: {{item.name}}
    </p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            id:'',
            name:'',
            list: [
                {id: 1, name: 'name1'},
                {id: 2, name: 'name2'},
                {id: 3, name: 'name3'},
                {id: 4, name: 'name4'},
                {id: 5, name: 'name5'},
            ]
        },
        methods: {
            add() {
                // this.list.push({id:this.id,name:this.name})
                this.list.unshift({id:this.id,name:this.name})
            }
        }
    });
</script>
</body>
</html>

效果：

star9595

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-for中key的使用注意事项

示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>综合练习</title> <script src="vue.min.js"></script></head>...
复制链接

扫一扫

专栏目录