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


Posted in Javascript onNovember 17, 2017

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  结果    

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

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 结果     

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

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在数组中插入重复数据的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
js获取ip和地区
Mar 10 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
Node.js学习教程之Module模块
Sep 03 Javascript
js中switch语句的学习笔记
Mar 25 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
jQuery实现滚动效果
Nov 17 #jQuery
不使用 JS 匿名函数理由
Nov 17 #Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 #Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 #Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 #Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 #Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 #Javascript
You might like
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
Nigma vs Alliance BO5 第二场2.14
2021/03/10 DOTA
JavaScript 继承详解(四)
2009/07/13 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
Python break语句详解
2014/03/11 Python
Python实现快速多线程ping的方法
2015/07/15 Python
OpenCV 边缘检测
2019/07/10 Python
python类中super() 的使用解析
2019/12/19 Python
pandas的resample重采样的使用
2020/04/24 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
波兰多品牌运动商店:StreetStyle24.pl
2020/09/22 全球购物
仓库管理专业个人自我评价范文
2013/11/11 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
玲玲的画教学反思
2014/02/04 职场文书
主题婚礼策划方案
2014/02/10 职场文书
医院领导班子整改方案
2014/10/01 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
Redis入门教程详解
2021/08/30 Redis
Java版 简易五子棋小游戏
2022/05/04 Java/Android