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)式的，當(dā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 中的代碼規(guī)范檢測兩種方法(Eslint驗證)
我們在使用vue 腳手架時，為了規(guī)范團隊的代碼格式，會有一個代碼規(guī)范檢測，如果不符合規(guī)范就會報錯，有時候我們不想按照他的規(guī)范去寫。這時我們需要關(guān)閉,這里腳本之家小編給大家?guī)砹巳サ魐ue 中的代碼規(guī)范檢測兩種方法(Eslint驗證)，一起看看吧2018-03-03
這篇文章主要介紹了vue實現(xiàn)列表拖拽排序的功能，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-11-11
深入理解vue輸入框字符限制的優(yōu)化設(shè)計方案
限制輸入框字符是一項需要結(jié)合技術(shù)實現(xiàn)與用戶體驗的綜合設(shè)計,通過實時限制、提交校驗與性能優(yōu)化,開發(fā)者可以高效解決輸入限制問題,同時提升用戶滿意度和數(shù)據(jù)安全性,本文給大家介紹vue輸入框字符限制的優(yōu)化設(shè)計,感興趣的朋友跟隨小編一起看看吧2024-12-12
因為vue的響應(yīng)式是通過 Object.defineProperty 來實現(xiàn)的，但是數(shù)組的length屬性是不能添加getter和setter，所有無法通過觀察length來判斷。這篇文章主要介紹了為什么Vue不能觀察到數(shù)組length的變化,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了vue+element實現(xiàn)打印頁面功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
如何使用elementUI組件實現(xiàn)表格的分頁及搜索功能
最近在使用element-ui的表格組件時,遇到了搜索框功能的實現(xiàn)問題,這篇文章主要給大家介紹了關(guān)于如何使用elementUI組件實現(xiàn)表格的分頁及搜索功能的相關(guān)資料,需要的朋友可以參考下2023-03-03
權(quán)限是對特定資源的訪問許可，所謂權(quán)限控制，也就是確保用戶只能訪問到被分配的資源，這篇文章主要介紹了vue的權(quán)限管理的相關(guān)知識,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了Vue項目添加動態(tài)瀏覽器頭部title的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要為大家介紹了Vue3通用API功能示例剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要為大家詳細介紹了vue實現(xiàn)聯(lián)動選擇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03