v-for循环中key属性的使用

最新推荐文章于 2024-03-27 20:09:56 发布

qweryitao

最新推荐文章于 2024-03-27 20:09:56 发布

阅读量404

点赞数

文章标签： Vue

本文链接：https://blog.csdn.net/qweryitao/article/details/102978123

版权

v-for循环中key属性的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.6.10/vue.js"></script>
    <style>


    </style>
</head>
<body>
<div id="app">
    <div>
        <label>Id:
            <input type="text" v-model="id">
        </label>
        <label>Name:
            <input type="text" v-model="name">
        </label>

        <input type="button" value="添加" @click="add">

    </div>
    <!--    注意：v-for循环的时候，key属性只能使用number获取String-->
    <!--    注意：key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值-->
    <!--    在组件中，使用v-for的时候，或者在一些特殊情况中，如果使用v-for有问题，必须在使用v-for的同时，指定唯一的字符串/数字类型：key值-->
    <p v-for="item in list" :key="item"><!--绑定唯一标识符id-->
        <input type="checkbox">
        {{item.id}}--------{{item.name}}
    </p>

</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            list: [
                {id: 1, name: 'zs1'},
                {id: 2, name: 'zs2'},
                {id: 3, name: 'zs3'},
                {id: 4, name: 'zs4'}
            ]
        },
        methods: {
            add() {
                this.list.push({id: this.id, name: this.name})
            }
        }
    })
</script>
</body>
</html>

qweryitao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-for循环中key属性的使用

v-for循环中key属性的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/vue/2.6....
复制链接

扫一扫