vue 用key拿对象value_vue对象添加属性（key:value）、显示和删除属性

效果图

新增

key值

value值

操作

{{key}}

{{keyValues[key]}}

删除

添加属性

addKey(){

if(this.keyValue.key==''){

this.$Message.error('请输入key值');

}else if(this.keyValue.value==''){

this.$Message.error('请输入value值');

}else{

if(JSON.stringify(this.keyValues) !== '{}'){

for(var k in this.keyValues){

if(k == this.keyValue.key) {

this.$Message.error('key值不能重复');

this.keyValue.key=''

return

}else{

this.keyValues[this.keyValue.key]=this.keyValue.value

this.keyValue.key=''

this.keyValue.value=''

//可以强制重新渲染页面

this.$forceUpdate();

}

}

}else{

this.keyValues[this.keyValue.key]=this.keyValue.value

this.keyValue.key=''

this.keyValue.value=''

this.$forceUpdate();

}

}

},

删除属性

keyDelete(key){

var keyValues = this.keyValues

for (var k in keyValues) {

console.log(k,key)

if(k==key){

delete keyValues[k]

}

this.keyValues=keyValues

this.$forceUpdate();

}

},