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对象的添加与删除，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 浅析php中array_map和array_walk的使用对比

    一.array_map() 1.array_map() 函数将用户自定义函数作用到数组中的每个值上,并返回用户自定义函数作用后的带有新值的数组,若函数作用后无返回值,则对应的新值数组中为空. 2.回调函数接受的参数数目应该和传递给 array_map() 函数的数组数目一致. 3.提示:您可以向函数输入一个或者多个数组. 若相函数输入2个数组,其函数接受参数也应该有两个,map给函数传值时,是每次从两个数组中分别取一个传给函 数.即多个数组之间是同步提交的,不是提交完一个数组再提交下一个提交几个

  • 5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例

    ECMAScript5标准发布于2009年12月3日,它带来了一些新的,改善现有的Array数组操作的方法.然而,这些新奇的数组方法并没有真正流行起来的,因为当时市场上缺乏支持ES5的浏览器. Array "Extras" 没有人怀疑这些方法的实用性,但写polyfill(PS:兼容旧版浏览器的插件)对他们来说是不值得的.它把"必须实现"变成了"最好实现".有人居然将这些数组方法称之为Array "Extras".哎! 但是,

  • JavaScript中利用Array和Object实现Map的方法

    本文实例讲述了JavaScript中利用Array和Object实现Map的方法.分享给大家供大家参考.具体如下: 昨天突然看到以前别人用JavaScript实现的Map感觉很不错,但是发现有个别方法有问题,顺便完善了下,添加了 remove .indexOf .values.clear等方法. /** * @author blune68 * @version 0.1, 07/27/12 * */ function Map(){ this.keys = new Array(); this.dat

  • php array_map使用自定义的函数处理数组中的每个值

    array_map 将回调函数作用到给定数组的单元上. 说明 array array_map ( callable $callback , array $arr1 [, array $... ] ) array_map() 函数将用户自定义函数作用到数组中的每个值上,并返回用户自定义函数作用后的带有新值的数组. 回调函数接受的参数数目应该和传递给 array_map() 函数的数组数目一致. 参数介绍: 参数 描述 callback 必需.对每个数组的每个元素作用的回调函数. arr1 必需.将

  • 理解Golang中的数组（array）、切片（slice）和map

    理解Golang中的数组（array）、切片（slice）和map

    我比较喜欢先给出代码,然后得出结论 数组 复制代码 代码如下: package main import (     "fmt" ) func main() {     arr := [...]int{1, 2, 3}     //打印初始的指针     fmt.Printf("the pointer is : %p \n", &arr)     printPointer(arr) } func printPointer(any interface{}) {

  • Go语言中的Array、Slice、Map和Set使用详解

    Array(数组) 内部机制 在 Go 语言中数组是固定长度的数据类型,它包含相同类型的连续的元素,这些元素可以是内建类型,像数字和字符串,也可以是结构类型,元素可以通过唯一的索引值访问,从 0 开始. 数组是很有价值的数据结构,因为它的内存分配是连续的,内存连续意味着可是让它在 CPU 缓存中待更久,所以迭代数组和移动元素都会非常迅速. 数组声明和初始化 通过指定数据类型和元素个数(数组长度)来声明数组. 复制代码 代码如下: // 声明一个长度为5的整数数组 var array [5]int

  • 详谈js遍历集合(Array,Map,Set)

    Array可以使用下标,Map和Set不能使用下标,ES6引入了iterable类型,Array,Map,Set都属于iterable类型,它们可以使用for...of循环来遍历: var a = ['A', 'B', 'C']; var s = new Set(['A', 'B', 'C']); var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]); for (var x of a) { // 遍历Array alert(x); } for (var

  • JavaScript中循环遍历Array与Map的方法小结

    js循环数组各种方法 eg1: for (var i = 0; i < myStringArray.length; i++) { alert(myStringArray[i]); //Do something } eg2: Array.prototype.foo = "foo!"; var array = ['a', 'b', 'c']; for (var i in array) { alert(array[i]); } for(var i in this.$GLOBAL_DET

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

    使用场景: 一个后台系统中, 管理员要配置自定义字段后台要生成id和title,其他角色要使用自定义字段的表单, 添加数据, 但是每个要填写的对象的id 和title都是无法固定的,因此页面显示的title 和id都需要自定义数字和map对象来实现,vue 的数值动态添加内容需要特定的方式: 1.定义一个vue空数组与一个vue 空Map对象: data: function() { return{ arrayData:[],//自定义字段中下拉框的数组 mapData:{},//自定义字段提交保

  • 关掉vue插件Vetur格式化的时候自动添加的样式操作

    关掉vue插件Vetur格式化的时候自动添加的样式操作

    目录 1 点击左下角设置按钮 2 点击设置到设置界面 3 在搜索栏输入需要查找的配置 4 点击我们想要修改的配置项 5 把默认项prettier修改为vscode-typescript 前言: 刚用Vetur的时候会发现只要格式化就会加什么小括号,冒号之类杂七杂八的标点符号.看着特别别扭,现在手把手教你如何关掉这个功能,傻瓜式教学.专门为小白设计 先打开vscode 1 点击左下角设置按钮 2 点击设置到设置界面 3 在搜索栏输入需要查找的配置 Vetur › Format › Default

  • vue响应式Object代理对象的修改和删除属性

    目录 正文 set delete 正文 上一篇文章我们学习了如何代理对象的读取,下面我们学习如何代理对象的修改和删除属性. set set就是修改代理的属性,按照我们之前写的reactive,它大概是这样的 const ITERATE_KEY=symbol() const p = new Proxy(obj,{ set(target,key,newVal,receiver){ const res = Reflect.set(target,key,newVal,receiver) trigger(

  • Vue实现户籍管理系统户籍信息的添加与删除方式

    目录 户籍管理系统,v-model,v-for的引用 界面预览 步骤思路 body部分 vue部分 css样式 户籍管理系统,v-model,v-for的引用 界面预览 步骤思路 1.html+css创建 2.引入vue,实例 3.准备默认数据message数组 4.渲染默认数据,v-for循环表单 5.创建一条新数据newmessage 6.绑定到输入框v-model 7.创建一个添加函数add(),把新数据添加到默认数据中,newmessage->message 8.添加完后,清空表单,即恢

  • vue使用数组splice方法失效,且总删除最后一项的问题及解决

    目录 使用数组splice方法失效,总删除最后一项的问题 我的解决办法是 vue中splice()方法的使用 参数 使用方法 案例 使用数组splice方法失效,总删除最后一项的问题 今天在写项目的时候,遇到一个很简单的需求,下图,点击添加标签,左边出现一个可以输入的标签,点击删除按钮, 就能删除当前标签,很简单的需求,我却搞了一个多小时(哎…新手愚笨啊) 一看到这个我的思路就是点击添加标签,把新增的节点push到自己定义的数组里,然后渲染出来,点击删除按钮,用splice方法从数组中删除掉当前

  • 解析javascript 数组以及json元素的添加删除

    javasscript删除数组的3种方法1,用shift()方法shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefinedvar chaomao=[1,2,3,4,5]var chaomao.shift()//得到1alert(chaomao)//[2,3,4,5] 2,用pop()方法pop:删除原数组最后一项,并返回删除元素的值:如果数组为空则返回undefinedvar chaomao=[1,2,3,4,5]var chaomao.pop()//得到5alert

  • Vuex给state中的对象新添加属性遇到的问题及解决

    目录 Vuex给state中的对象新添加属性遇到的坑 向vuex对象中增加新的属性需要注意 总结 Vuex给state中的对象新添加属性遇到的坑 state.js中有一个空对象obj: export default {   ...   obj: {} } 在App.vue中点击“给空对象增加属性”按钮,触发事件addObjAttr: <template>   <div id="app">     ...     <button @click="a

  • Array数组对象中的forEach、map、filter及reduce详析

    前言 刚才某人问了我一个问题.map怎么遍历,我刷刷刷就是一顿写.遍历么,forEach么,妥妥的. var map = new Map(); map.set('item1', 'value1') map.set('item2', 'value2') map.forEach(function(value, key, map) { console.log("Key: %s, Value: %s", key, value); }); 好吧,我写完了之后,他发给我了一句话. [].forEa

  • Js的Array数组对象详解

    本文为大家分享了关于Js的Array数组对象的相关资料,供大家参考,具体内容如下 1. 介绍 1.1 说明 数组是值的有序集合.每个值叫做一个元素,而每个元素在数组中有一个位置,以数字表示,称为索引.JavaScript数组是无类型:数组元素可以是任意类型,并且同一个数组中的不同元素也可能有不同的类型. --<JavaScript权威指南(第六版)> 1.2 定义方式 var names = new Array("张三", "李四", "王五&

  • 详解Vue中数组和对象更改后视图不刷新的问题

    Vue数据响应原理 官方的解释很清晰: 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter.Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因. 用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修

随机推荐