Vue.js在数组中插入重复数据的实现代码

来源：懂视网责编：小采时间：2020-11-27 22:25:28

Vue.js在数组中插入重复数据的实现代码

Vue.js在数组中插入重复数据的实现代码:1、在默认的情况下，Vue.js默认不支持往数组中加入重复的数据。可以使用track-by=$index来实现。 2、不使用track-by=$index的数组插入，数组不支持重复数据的插入 2.1 JavaScript代码 <script type=text/javascript

推荐度：

点击下载本文 文档为doc格式

导读Vue.js在数组中插入重复数据的实现代码:1、在默认的情况下，Vue.js默认不支持往数组中加入重复的数据。可以使用track-by=$index来实现。 2、不使用track-by=$index的数组插入，数组不支持重复数据的插入 2.1 JavaScript代码 <script type=text/javascript

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

2、不使用track-by="$index"的数组插入，数组不支持重复数据的插入

2.1 JavaScript代码

<script type="text/javascript" src="../js/vue-1.0.21.js"></script> 
 <script type="text/javascript"> 
 window.onload = function() { 
 vm = new Vue({ 
 el: '#app', 
 data: { 
 arrMsg: ['apple', 'orage', 'pear'] 
 }, 
 methods: { 
 add: function() { 
 this.arrMsg.push('tamota'); 
 } 
 } 
 }); 
 } 
 </script>

2.2 html代码

<div id="app"> 
 <!--显示数据--> 
 <ul> 
 <li v-for="value in arrMsg" > 
 {{value}} 
 </li> 
 </ul> 
 <button type="button" @click="add">增加数据</button> 
 </div>

2.2 结果

3、使用track-by="$index"的数组插入，数组支持重复数据的插入

3.1 Javascript代码

<script type="text/javascript" src="../js/vue-1.0.21.js"></script> 
 <script type="text/javascript"> 
 window.onload = function() { 
 vm = new Vue({ 
 el: '#app', 
 data: { 
 arrMsg: ['apple', 'orage', 'pear'] 
 }, 
 methods: { 
 add: function() { 
 this.arrMsg.push('tamota'); 
 } 
 } 
 }); 
 } 
 </script>

3.2 html代码

<div id="app" class="container"> 
 <!--显示数据--> 
 <ul> 
 <li v-for="value in arrMsg" track-by="$index" > 
 {{value}} 
 </li> 
 </ul> 
 <button type="button" @click="add" >增加数据</button> 
 </div>

3.3 结果

4、完整代码

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="UTF-8"> 
 <title></title> 
 <link rel="stylesheet" href="../css/bootstrap.min.css" rel="external nofollow" /> 
 <style type="text/css"> 
 .container{ 
 margin-top: 20px; 
 } 
 </style> 
 <script type="text/javascript" src="../js/vue-1.0.21.js"></script> 
 <script type="text/javascript"> 
 window.onload = function() { 
 vm = new Vue({ 
 el: '#app', 
 data: { 
 arrMsg: ['apple', 'orage', 'pear'] 
 }, 
 methods: { 
 add: function() { 
 this.arrMsg.push('tamota'); 
 } 
 } 
 }); 
 } 
 </script> 
 </head> 
 <body> 
 <div id="app" class="container"> 
 <!--显示数据--> 
 <ul> 
 <li v-for="value in arrMsg" track-by="$index" > 
 {{value}} 
 </li> 
 </ul> 
 <button type="button" @click="add" >增加数据</button> 
 </div> 
 </body> 
</html>

ps：下面看下vue 数组重复，循环报错

Vue.js默认不支持往数组中加入重复的数据。可以使用track-by="$index"来实现。

总结

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