element vue Array数组和Map对象的添加与删除操作


Posted in Javascript onNovember 14, 2018

使用场景:

一个后台系统中, 管理员要配置自定义字段后台要生成id和title,其他角色要使用自定义字段的表单, 添加数据, 但是每个要填写的对象的id 和title都是无法固定的,因此页面显示的title 和id都需要自定义数字和map对象来实现,vue 的数值动态添加内容需要特定的方式:

1.定义一个vue空数组与一个vue 空Map对象:

data: function() {
return{


arrayData:[],//自定义字段中下拉框的数组


mapData:{},//自定义字段提交保存数据的map


dbData:[



{}


],//数据库查询出来的自定义字段



mapKey:'age',


mapValue:29,


arrayIndex:0,


arrayValue:'中国',

};
}

2.赋值对象:

Map 赋值: Vue.set(this.mapData,this.mapkey,this.mapValue);
Array 赋值: Vue.set(this.arrayData,this.arrayIndex,this.arrayValue);

总结

以上所述是小编给大家介绍的element vue Array数组和Map对象的添加与删除,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
JS数组去重与取重的示例代码
Jan 24 Javascript
javascript控制台详解
Jun 25 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
微信小程序wepy框架笔记小结
Aug 08 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 Javascript
ES6 fetch函数与后台交互实现
Nov 14 #Javascript
vue-cli3全面配置详解
Nov 14 #Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 #Javascript
laydate时间日历插件使用方法详解
Nov 14 #Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 #jQuery
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 #Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 #Javascript
You might like
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
解析php中memcache的应用
2013/06/18 PHP
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
微信小程序入门教程
2016/11/18 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
python有证书的加密解密实现方法
2014/11/19 Python
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
解决Python传递中文参数的问题
2015/08/04 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
python 自动识别并连接串口的实现
2021/01/19 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
文明青少年标兵事迹材料
2014/01/28 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
检讨书格式
2015/01/23 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
红色故事汇观后感
2015/06/18 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
基于Python的EasyGUI学习实践
2021/05/07 Python