Vue如何添加重复数据

最新推荐文章于 2025-06-19 19:43:49 发布

新手新思路新技能

最新推荐文章于 2025-06-19 19:43:49 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u013005675/article/details/62891765

本文介绍Vue.js中如何利用v-for指令的track-by属性来优化列表渲染，并允许列表中存在重复的数据项。通过具体示例展示了如何在Vue项目中实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue如何添加重复数据

循环：

常规：v-for="value in data"

缺陷：无法添加重复数据

track-by可以添加重复数据

track-by='索引' 提高循环性能

track-by='$index/uid（数据库id）'

用例：<div id="box">

    <input type="button" value="添加" @click="add">
    <ul>
        <li v-for="val in arr">
            {{val}}
        </li>
    </ul>
</div>
<script>
    var vm=new Vue({
        data:{
            arr:['apple','pear','orange']
        },
        methods:{
            add:function(){
                this.arr.push('tomato');
            }
        }
    }).$mount('#box');
</script>

track-by优化可以添加重复数据<div id="box">
    <input type="button" value="添加" @click="add">
    <ul>
        <li v-for="val in arr" track-by="$index">
            {{val}}
        </li>
    </ul>
</div>
<script>
    var vm =new Vue({
        data:{
            arr:['apple','pear','orange']
        },
        methods:{
            add:function(){
                this.arr.push('tomato');
            }
        }
    }).$mount('#box');
</script>