您现在的位置是:首页 > 技术教程 正文

Vue 循环map对象拿到key值和value值,VUE 获取对象{}的key值,vue根据对象id删除数组中的对象,实现局部刷新的功能,vue中JS 对象动态添加键值对

admin 阅读: 2024-03-29
后台-插件-广告管理-内容页头部广告(手机)

适用场景:
vue中定义的map对象 map : { name : 'xxx' }

接口回显map格式的数据 data :{ key : value}

都可以通过以下方式拿到key和value的值

  1. for(const key in map){
  2. console.log("key名称是:"+key+",key的值是:"+map[key])
  3. }

VUE 获取对象{}的key值

  1. let keys = Object.keys(data)
  2. for (let i =0; i < keys.length; i++) {
  3. if(keys[i]!='creationDate'){
  4. this.$set(this.config.data[index], keys[i], data[keys[i]])
  5. }
  6. }

 vue根据对象id删除数组中的对象,实现局部刷新的功能

方法一:使用过滤器
注:这个一般是根据对象id

  1. //tableData为原数组,row.id为将要删除的对象的id
  2. // 使用过滤器筛选出id不等于要删除的数据的所有对象,并将其重新赋值给list数组
  3. this.tableData = this.tableData.filter((item) => {
  4. return item.id != row.id;
  5. });

方法二:使用splice()
注:这个一般是根据数组下标来删除

  1. //tableData为原数组,id为将要删除的对象数组下标
  2. this.tableData = this.tableData.splice(id,1);//第一个参数为开始下标,第二个参数为删除长度

vue中JS 对象动态添加键值对

  1. this.list = res.data
  2. this.list.forEach((item) => {
  3. // console.log(item,"list")
  4. // JS 对象动态添加Key value
  5. this.tableheader["name" + item.gid] = item.chName; //name1,name2
  6. console.log(this.tableheader, "9999");//对象形式(所有选择的表头名称)
  7. });

vue 数据添加分为三种方法:1.unshift(),2.push(),3.splice()

1.unshift() //数组头部添加一条新数据

  1. let newList = {
  2. id:'4'
  3. name1:'a4',
  4. name2:'b4',
  5. }
  6. this.listTable.unshift(newList) //unshift()在数组头部添加一条数据
  7. console.log(this.listTable)

2.push() //数组末端添加一条新数据

  1. this.listTable.push(newList) //push()在数组末端添加一条数据
  2. console.log(this.listTable)

3.splice() //数组操作

  1. copyNew(time,index){
  2. console.log(time)
  3. let newList = {
  4. id:time.id,
  5. name1:time.name1,
  6. name2:time.name2,
  7. }
  8. //第一个参数为需要操作数据的下标,第二个参数为操作添加/删除(0为添加,1为不操作,2为删除,3为删除多条数据),第三个参数可选
  9. this.listTable.splice(index,0,newList)
  10. console.log(this.listTable)
  11. }

标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索