vue對象添加屬性(key:value)、顯示和刪除屬性方式
更新時間：2022年07月27日 16:30:29 作者：巖崎理奈
這篇文章主要介紹了vue對象添加屬性(key:value)、顯示和刪除屬性方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
對象添加屬性(key:value)、顯示和刪除屬性
效果圖
<FormItem label="輸入項填充內(nèi)容 :" prop="value" :rules="name1" style="margin-top: 20px">
<Button type="success" @click="addKey">新增</Button>
<table class="table">
<tr>
<th>key值</th>
<th>value值</th>
<th>操作</th>
</tr>
<tr v-for="(item,key) in keyValues" v-if="keyValueShow">
<td>{{key}}</td>
<td>{{keyValues[key]}}</td>
<td><Button type="error" @click="keyDelete(key)">刪除</Button></td>
</tr>
<tr>
<td>
<FormItem>
<Input class="application-ipt" type="text" placeholder="輸入內(nèi)容" v-model="keyValue.key"></Input>
</FormItem>
</td>
<td colspan="2">
<FormItem>
<Input class="application-ipt" type="text" placeholder="輸入內(nèi)容" v-model="keyValue.value"></Input>
</FormItem>
</td>
</tr>
</table>
</FormItem>添加屬性
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值不能重復(fù)');
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();
}
},不能檢測到對象屬性的添加或刪除問題
官網(wǎng)介紹到：受現(xiàn)代 JavaScript 的限制 (以及廢棄 Object.observe)，Vue 不能檢測到對象屬性的添加或刪除。
由于 Vue 會在初始化實例時對屬性執(zhí)行 getter/setter 轉(zhuǎn)化過程，所以屬性必須在 data 對象上存在才能讓 Vue 轉(zhuǎn)換它，這樣才能讓它是響應(yīng)的。
上面的a是響應(yīng)式的，所以a的改變后會自動渲染頁面；
但是b是在vm實例創(chuàng)建之后添加的屬性，所以他不是響應(yīng)式的，當我們改變b的值的時候，通過DevTool看到的數(shù)據(jù)并不會改變，除非我們在DevTool中刷新數(shù)據(jù)，而且頁面也不會刷新。
有三種解決方案
- 方案一：利用Vue.set(object,key,value)
Vue.set(vm.obj,"sex","man")
- 方案二：利用this.$set(this.object,key,value)
this.$set(this.obj,"sex","man")
- 方案三：利用Object.assign({},this.obj)
this.obj.sex = "man";this.obj = Object.assign({},this.obj)- 或者下面方式
this.obj = Object.assign({ },this.obj,{"sex","man"})以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue框架和react框架的區(qū)別以及各自的應(yīng)用場景使用
這篇文章主要介紹了vue框架和react框架的區(qū)別以及各自的應(yīng)用場景使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue的url請求圖片的問題及請求失敗解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
本文主要介紹了Vuex模塊化實現(xiàn)待辦事項的狀態(tài)管理的相關(guān)知識，具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了基于vue的短信驗證碼倒計時demo，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)分頁的三種效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
理解Proxy及使用Proxy實現(xiàn)vue數(shù)據(jù)雙向綁定操作
這篇文章主要介紹了理解Proxy及使用Proxy實現(xiàn)vue數(shù)據(jù)雙向綁定操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue中的echarts實現(xiàn)寬度自適應(yīng)的解決方案
這篇文章主要介紹了vue中的echarts實現(xiàn)寬度自適應(yīng),本文給大家分享實現(xiàn)方案，代碼簡單易懂，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
第一次接觸神奇的vue.js，主要了解一下v-model、v-if、v-else、v-show、v-for等，感興趣的小伙伴們可以一起學(xué)習一下2016-12-12
vue動態(tài)路由實現(xiàn)多級嵌套面包屑的思路與方法
在實際項目中我們會碰到多層嵌套的組件組合而成，比如我們常見的面包屑導(dǎo)航，下面這篇文章就來給大家介紹關(guān)于vue實現(xiàn)動態(tài)路由多級嵌套面包屑的思路與方法，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
這篇文章主要介紹了vue中的keep-alive的相關(guān)資料，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01