element vue Array数组和Map对象的添加与删除
使用场景:
一个后台系统中, 管理员要配置自定义字段后台要生成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对象的添加与删除的更多相关文章
- Vue.set 向响应式对象中添加响应式属性,及设置数组元素触发视图更新
一.为什么需要使用Vue.set? vue中不能检测到数组和对象的两种变化: 1.数组长度的变化 vm.arr.length = 4 2.数组通过索引值修改内容 vm.arr[1] = ‘aa’ Vu ...
- Vue中组件化编码 完成任务的添加、删除、统计、勾选需求(实战练习三完结)
上一个章节实现数据在组件之间的传递 .这一章主要是完成添加任务到任务栏.删除任务栏.统计任务完成情况.主要还是参数在各个组件之间的传递. 上一章节的链接地址:https://blog.csdn.net ...
- 白鹭引擎 - 对象的添加与删除 ( 开关效果 addChild, removeChild )
class Main extends egret.DisplayObjectContainer { /** * Main 类构造器, 初始化的时候自动执行, ( 子类的构造函数必须调用父类的构造函数 ...
- vue根据数组对象中某个唯一标识去重
由于在vue中,会自动在数组和对象中加入_obser__观察者模式的一些属性,所以直接用数组的filter去重(下面这种),indexOf不能准确识别 var arr = [1, 2, 2, 3, 4 ...
- for 循环 和 Array 数组对象
博客地址:https://ainyi.com/12 for 循环 和 Array 数组对象方法 for for-in for-of forEach效率比较 - 四种循环,遍历长度为 1000000 的 ...
- JavaScript中的内置对象-8--1.Array(数组)-Array构造函数; 数组的栈方法; 数组的转换方法; 数组的操作方法; 删除-插入-替换数组项; ECMAScript为数组实例添加的两个位置方法;
JavaScript内置对象-1Array(数组) 学习目标 1.掌握任何创建数组 2.掌握数值元素的读和写 3.掌握数组的length属性 如何创建数组 创建数组的基本方式有两种: 1.使用Arra ...
- 将Json对象数组转化成JS Array数组
private format(cards:any):Array<any>{ var result = new Array(); cards.forEach(element => { ...
- JavaScript高级编程——Array数组迭代(every()、filter()、foreach()、map()、some(),归并(reduce() 和reduceRight() ))
JavaScript高级编程——Array数组迭代(every().filter().foreach().map().some(),归并(reduce() 和reduceRight() )) < ...
- es6中对象转数组,转map
//对象转数组let array = Object.keys(userPermission).map(key=> userPermission[key]) console.log(array) ...
随机推荐
- 细说MySQL表操作
目录 语法 查看表结构 查看所有的表 删除表 查看创建表的语句 修改表的字符集和校验规则 修改表名 在表中添加新字段 修改表的字段名 修改表中字段的属性 删除表中的某个字段 设置某个字段为主键 把某个 ...
- java中最常见的几种运行时异常,你get了吗?
NullPointerException (空指针异常) ClassCastException (类型强制转换异常) NumberFormatException (数字格式异常) NegativeAr ...
- Linux主机操作系统加固规范
对于企业来说,安全加固是一门必做的安全措施.主要分为:账号安全.认证授权.协议安全.审计安全.总的来说,就是4A(统一安全管理平台解决方案),账号管理.认证管理.授权管理.审计管理.用漏洞扫描工具 ...
- Java 11 已发布,String 还能这样玩!
在文章<Java 11 正式发布,这 8 个逆天新特性教你写出更牛逼的代码>中,我有介绍到 Java 11 的八个新特性,其中关于 String 加强部分,我觉得有点意思,这里单独再拉出来 ...
- FTP服务器搭建与访问的相关问题
近期想搭建在云服务器上搭建一个项目,每次远程登陆服务器实在比较繁琐,故而想到使用FTP上传下载方式来进行相应的操作:在网络上搭建FTP服务器的文档还是很丰富的,按照操作一步步来还算方便,楼主就不在这边 ...
- 【code block】局部代码块+构造代码块+静态代码块
1.局部代码块 位置:位于类的方法中 表示方法:{} 作用:控制变量的生命周期,减少内存消耗 demo: public class LocalCode { public static void mai ...
- redis 删除大key集合的方法
redis大key,这里指的是大的集合数据类型,如(set/hash/list/sorted set),一个key包含很多元素.由于redis是单线程,在删除大key(千万级别的set集合)的时候,或 ...
- HP C7000刀片服务器开关机过程
HP C7000开关机过程 一.HP C7000关机过程 1.关闭台刀片服务器. 2.确认刀片已关机后,登录https://xxx.xxx.xxx.x/,Administrator/2PF2QT, ...
- 通过Microsoft Learn进行学习以提升技能
通过 Microsoft Learn,可以免费而且轻松有趣地学习 Microsoft 技术. Microsoft Learn的与众不同 借助 Microsoft Learn,任何人都能按自己的学习计划 ...
- EL表达式jsp页面double小数点后保留两位
EL表达式jsp页面double小数点后保留两位,四舍五入 <fmt:formatNumber type="number" value="${member.logi ...