当前位置：首页 > 资讯 > 技术文档

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

时间：2020-01-11 05:00 编辑：来源：阅读：
扫一扫，手机访问

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

1、在默认的情况下，Vue.js默认不支持往数组中加入重复的数据。可以使用[code]track-by="$index"[/code]来实现。 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 结果 [img]http://files.jb51.net/file_images/article/201711/20171117144835896.gif?20171017144857[/img] 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 结果 [img]http://files.jb51.net/file_images/article/201711/20171117144926986.gif?20171017144939[/img] 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>

[b]ps：下面看下vue 数组重复，循环报错[/b] Vue.js默认不支持往数组中加入重复的数据。可以使用[code]track-by="$index"[/code]来实现。 [b]总结[/b] 以上所述是小编给大家介绍的Vue.js在数组中插入重复数据的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持！

全部评论(0)

上一篇：vue实现消息的无缝滚动效果的示例代码
下一篇：详解vue事件对象、冒泡、阻止默认行为

资讯排行榜
更多>>