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实现禁止右键和F12查看源代码
Dec 26 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
jQuery的事件预绑定
Dec 05 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
es5 类与es6中class的区别小结
Nov 09 Javascript
vue使用watch监听属性变化
Apr 30 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
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
Python中的元组介绍
2019/01/28 Python
Python 编程速成(推荐)
2019/04/15 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
Django多数据库的实现过程详解
2019/08/01 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
Python实现画图软件功能方法详解
2020/07/28 Python
什么是makefile? 如何编写makefile?
2012/08/08 面试题
《童趣》教学反思
2014/02/19 职场文书
情人节活动策划方案
2014/02/27 职场文书
股份合作协议书
2014/04/12 职场文书
同意离婚答辩状
2015/05/22 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android
Nginx内网单机反向代理的实现
2021/11/07 Servers