1、在默认的情况下，Vue.js默认不支持往数组中加入重复的数据。可以使用跟踪方式='$index '来实现。

2、不使用跟踪方式='$index '的数组插入，数组不支持重复数据的插入

2.1 JavaScript代码

脚本类型=' text/JavaScript ' src=' http :/js/Vue-1。0 .21 .js/script脚本类型=' text/JavaScript '窗口。onload=function(){ VM=new Vue({ El : ' # app }，data: { arrMsg: ['apple '，' orage '，' pear'] }，methods : { add : function(){ this。阿伦格。push(' tamo ta ')；} } });} /script 2.2 html代码

div id='app '！-显示数据-ul Li v-for=' arrMsg '中的值{value}} /li /ul按钮类型=“按钮”@单击='添加'增加数据/按钮/div 2.2结果

3、使用跟踪方式='$index '的数组插入，数组支持重复数据的插入

3.1 Javascript代码

脚本类型=' text/JavaScript ' src=' http :/js/Vue-1。0 .21 .js/script脚本类型=' text/JavaScript '窗口。onload=function(){ VM=new Vue({ El : ' # app }，data: { arrMsg: ['apple '，' orage '，' pear'] }，methods : { add : function(){ this。阿伦格。push(' tamo ta ')；} } });} /script 3.2 html代码

div id='app' class='container '！-显示数据-ul Li v-for=' arrMsg '中的值跟踪方式=' $ index ' { value } }/Li/ul按钮类型=' button ' @单击=' add '增加数据/按钮/div 3.3结果

4、完整代码

！DOCTYPE html html head meta charset=' UTF-8 ' title/title link rel='样式表href='./CSS/bootstrap。量滴CSS ' rel='外部无跟随'/样式类型=' text/CSS ' .容器{ margin-top : 20px；}/样式脚本类型=' text/JavaScript ' src=' http :/js/Vue-1。0 .21 .js/script脚本类型=' text/JavaScript '窗口。onload=function(){ VM=new Vue({ El : ' # app }，data: { arrMsg: ['apple '，' orage '，' pear'] }，methods : { add : function(){ this。阿伦格。push(' tamo ta ')；} } });}/script/head body div id=' app ' class=' container '！-显示数据-ul Li v-for=' arrMsg '中的值跟踪方式=' $ index ' { value } }/Li/ul按钮类型=' button ' @单击=' add '增加数据/button /div /body /html ps:下面看下某视频剪辑软件数组重复，循环报错

Vue.js默认不支持往数组中加入重复的数据。可以使用跟踪方式='$index '来实现。

总结

以上所述是小编给大家介绍的Vue.js在数组中插入重复数据的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：Vue.js在数组中插入重复数据的实现代码是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益，请联系本站底部QQ或者邮箱删除。