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

这篇具有很好参考价值的文章主要介绍了Vue 循环map对象拿到key值和value值,VUE 获取对象{}的key值,vue根据对象id删除数组中的对象，实现局部刷新的功能,vue中JS 对象动态添加键值对。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

VUE 获取对象{}的key值

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

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

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

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

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

//tableData为原数组，id为将要删除的对象数组下标

this.tableData = this.tableData.splice(id,1);//第一个参数为开始下标，第二个参数为删除长度

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

this.list = res.data

this.list.forEach((item) => {

            // console.log(item,"list")

            // JS 对象动态添加Key value对

            this.tableheader["name" + item.gid] = item.chName;   //name1,name2

            console.log(this.tableheader, "9999");//对象形式（所有选择的表头名称）

          });

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

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

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

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

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

3.splice() //数组操作文章来源地址https://www.toymoban.com/news/detail-716984.html

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

到了这里，关于Vue 循环map对象拿到key值和value值,VUE 获取对象{}的key值,vue根据对象id删除数组中的对象，实现局部刷新的功能,vue中JS 对象动态添加键值对的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！