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 相关文章推荐
js验证表单第二部分
Nov 25 Javascript
javascript入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 Javascript
加载 Javascript 最佳实践
Oct 30 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 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
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
srcElement表格样式
2006/09/03 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
详谈javascript异步编程
2016/02/21 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
详解Python中的条件判断语句
2015/05/14 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
python绘制中国大陆人口热力图
2018/11/07 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
python装饰器原理与用法深入详解
2019/12/19 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
Python Map 函数的使用
2020/08/28 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
Python加密技术之RSA加密解密的实现
2022/04/08 Python
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python
Nginx限流和黑名单配置
2022/05/20 Servers