How to add, modify, delete, and filter attribute key values for objects in Vue

1. Add attributes and modify the value
method: this.$set(this.obj,'key',value)
or
var vm = new Vue({…})
vm.set(this.obj, “key”, value )

var demo={
    
    a:"1",b:"2"}
this.$set(demo,"c","3")
console.log(demo)//{a:"1",b:"2",c:"3"}
//如果对象中存在该key值,那么就不是新增属性,而是修改该key值的value值
this.$set(demo,"c","4")
console.log(demo)//{a:"1",b:"2",c:"4"}
//扩展数组的
this.$set(arr, index,  value)
或者
var vm = new Vue({
    
    ..})
vm.set(arr, index, value)
案例:
var a=["1","2","3"]
this.$set(a,2,"4")
console.log(a)//["1","2","4"]
this.$set(a,3,"5")
console.log(a)//["1","2","4","5"]

2. Modify the attribute key value

//案例:把selected改为checkAll
var demo={
    
    selected:false}
// 复制原来的值
demo['checkAll'] = demo[ 'selected' ]
//删除原来的key
this.$delete(demo,'selected')
console.log(demo)//{checkAll:false}

3. Delete the attribute
this.$delete(obj,'key')

//案例 删除属性name
var data = {
    
    name: 'xxx', status: 0}
this.$delete(data,'name')
console.log(data)//{status:0}

4. Filter properties
Object.keys() returns a string array representing all enumerable properties of a given object

var obj = {
    
     foo: 'bar', baz: 42 };
console.log(Object.keys(obj)); // ['foo', 'baz']

//案例:筛选出对象的第一个属性
var list = [
	{
    
     melonbody: 8.4, strName: '损伤程度', level: '一等品' },
	{
    
     colorvalue: 8.42, strName: '颜色', level: '一等品' },
	{
    
     diameter: 8.4, strName: '直径', level: '一等品' },
	{
    
     melonbody: 6.41, strName: '损伤程度', level: '二等品' },
	{
    
     colorvalue: 6.4, strName: '颜色', level: '二等品' },
	{
    
     diameter: 6.42, strName: '直径', level: '二等品' },
	{
    
     melonbody: 4.41, strName: '损伤程度', level: '三等品' },
	{
    
     colorvalue: 4.41, strName: '颜色', level: '三等品' },
	{
    
     diameter: 4.42, strName: '直径', level: '三等品' }
];
var demo2=[]
for (var i in list){
    
    
	demo2.push(Object.keys(list[i]))
}
var demo3 = []
for(var i in demo2){
    
    
	demo3.push(demo2[i][0])
}
var demo4=[...new Set(demo3)]			
console.log(demo4)//['melonbody','colorvalue','diameter']

There are many ways to continue

Guess you like

Origin blog.csdn.net/GongWei_/article/details/112977859