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 相关文章推荐
JavaScript实现Sleep函数的代码
Mar 04 Javascript
Javascript Tab 导航插件 (23个)
Jun 11 Javascript
javascript 日期时间 转换的方法
Feb 21 Javascript
浅析js封装和作用域
Jul 09 Javascript
jquery动态添加删除一行数据示例
Jun 12 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
简单实现jquery焦点图
Dec 12 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
Ajax实现局部刷新的方法实例
Mar 31 Javascript
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
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
PHP字符串处理的10个简单方法
2010/06/30 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
ASP中Sub和Function的区别说明
2020/08/30 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
详解jquery uploadify 上传文件
2013/11/09 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
js实现简单页面全屏
2019/09/17 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
python使用多线程不断刷新网页的方法
2015/03/31 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
Python验证码截取识别代码实例
2020/05/16 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
法国家具及室内配件店:home24
2017/01/21 全球购物
大学生自我鉴定范文模板
2014/01/21 职场文书
安全生产活动月方案
2014/03/09 职场文书
环保建议书作文
2014/03/12 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
校园音乐节目广播稿
2015/08/19 职场文书