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) ...
随机推荐
- Java核心技术卷一基础知识-第2章-Java程序设计环境-读书笔记
第2章 Java程序设计环境 本章内容: 安装Java开发工具箱 使用集成开发环境 选择开发环境 运行图形化应用程序 使用命令行工具 建立并运行applet本章主要介绍如何安装Java开发工具箱(JD ...
- Day4:html和css
Day4:html和css 规范注意 链接里面不能再放链接. a里面可以放入块级元素. 空格规范 选择器与{之间必须包含空格. 如: .class {} 属性名与之后的:符号之间不允许包含空格, 而: ...
- 使用Java面向对象单词必备
第一章 class 班级,用声明类 object 目标,整个程序集对大 static 静态的 final 不可更改的,用声明常量 private 私有的,用访问权限 public ...
- 【MySQL】当前读、快照读、MVCC
当前读: select...lock in share mode (共享读锁) select...for update update , delete , insert 当前读, 读取的是最新版本, ...
- JSTL 和 EL
EL表达式 Expression Language 语法${作用域中的值} 使用EL表达式时,需要在page标签中写上isELIgnored="false",否则EL表达式不生 ...
- Python的GUI编程(TK)
TK在大多数 Unix平台.Windows平台和Macintosh系统都是预装好的,TKinter 模块是 Tk GUI 套件的标准Python接口.可实现Python的GUI编程. Tkinter模 ...
- H5在WebView上开发小结
背景 来自我司业务方要求,需开发一款APP.但由于时间限制,只能采取套壳app方式,即原生app内嵌webview展示前端页面.本文主要记述JavaScript与原生app间通信,以及内嵌webvie ...
- queue源码
queue概述 queue是一种先进先出的数据结构,允许新增元素.移除元素,queue只允许从底端加入元素,从顶端移除元素,不允许有遍历行为. queue定义 以某种既有容器作为底部结构,将其接口改变 ...
- Kubernetes 中的核心组件与基本对象概述
Kubernetes 是 Google 基于 Borg 开源的容器编排调度,用于管理容器集群自动化部署.扩容以及运维的开源平台.作为云原生计算基金会 CNCF(Cloud Native Computi ...
- Elasticsearch基本概念及核心配置文件详解
Elasticsearch5.X,下列的是Elasticsearch2.X系类配置,其实很多配置都是相互兼容的 1. 配置文件 config/elasticsearch.yml 主配置文件 confi ...