v-for使用注意事项

最新推荐文章于 2024-06-26 16:30:30 发布

scwMason

最新推荐文章于 2024-06-26 16:30:30 发布

阅读量760

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/scwMason/article/details/83550038

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<div id="app">
    <div>
        <label for="">id:
            <input type="text" v-model="id">
        </label>
        <label for="">name:
            <input type="text" v-model="name">
        </label>
        <input type="button" value="添加" @click="add">
    </div>
    <p v-for="item in list" >
        <input type="checkbox">{{item.id}}----{{item.name}}
    </p>
</div>
<body>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                list: [
                    { id: 1, name: "张三" },
                    { id: 2, name: "里斯" },
                    { id: 3, name: "离校" }
                ],
                id: "",
                name: ""
            },
            methods: {
                add() {
                    this.list.unshift({ id: this.id, name: this.name })//新建一个选项加在 
                                                                       //最前面
                }
            }
        })
    </script>
</body>

我们先选中张三选项，然后添加一个张华：

发现张华被选中了

所以我们加上一个key：

 <p v-for="item in list" :key="item.id">
        <input type="checkbox">{{item.id}}----{{item.name}}
    </p>

这样就保证了数据的唯一性

scwMason

关注

0
点赞
踩
0

收藏

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

&lt;div id="app"&gt; &lt;div&gt; &lt;label for=""&gt;id: &lt;input type="text" v-model="id"&gt; &lt;/label&gt; &lt;label for="
复制链接

扫一扫

专栏目录