vue對(duì)象添加屬性(key:value)、顯示和刪除屬性方式
更新時(shí)間：2022年07月27日 16:30:29 作者：巖崎理奈
這篇文章主要介紹了vue對(duì)象添加屬性(key:value)、顯示和刪除屬性方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
對(duì)象添加屬性(key:value)、顯示和刪除屬性
效果圖
<FormItem label="輸入項(xiàng)填充內(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('請(qǐng)輸入key值');
}else if(this.keyValue.value==''){
this.$Message.error('請(qǐng)輸入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=''
//可以強(qiáng)制重新渲染頁面
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();
}
},不能檢測(cè)到對(duì)象屬性的添加或刪除問題
官網(wǎng)介紹到：受現(xiàn)代 JavaScript 的限制 (以及廢棄 Object.observe)，Vue 不能檢測(cè)到對(duì)象屬性的添加或刪除。
由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì)屬性執(zhí)行 getter/setter 轉(zhuǎn)化過程，所以屬性必須在 data 對(duì)象上存在才能讓 Vue 轉(zhuǎn)換它，這樣才能讓它是響應(yīng)的。
上面的a是響應(yīng)式的，所以a的改變后會(huì)自動(dòng)渲染頁面；
但是b是在vm實(shí)例創(chuàng)建之后添加的屬性，所以他不是響應(yīng)式的，當(dāng)我們改變b的值的時(shí)候，通過DevTool看到的數(shù)據(jù)并不會(huì)改變，除非我們?cè)贒evTool中刷新數(shù)據(jù)，而且頁面也不會(huì)刷新。
有三種解決方案
- 方案一：利用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"})以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
去掉vue 中的代碼規(guī)范檢測(cè)兩種方法(Eslint驗(yàn)證)
我們?cè)谑褂胿ue 腳手架時(shí)，為了規(guī)范團(tuán)隊(duì)的代碼格式，會(huì)有一個(gè)代碼規(guī)范檢測(cè)，如果不符合規(guī)范就會(huì)報(bào)錯(cuò)，有時(shí)候我們不想按照他的規(guī)范去寫。這時(shí)我們需要關(guān)閉,這里腳本之家小編給大家?guī)砹巳サ魐ue 中的代碼規(guī)范檢測(cè)兩種方法(Eslint驗(yàn)證)，一起看看吧2018-03-03
這篇文章主要介紹了vue實(shí)現(xiàn)列表拖拽排序的功能，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-11-11
深入理解vue輸入框字符限制的優(yōu)化設(shè)計(jì)方案
限制輸入框字符是一項(xiàng)需要結(jié)合技術(shù)實(shí)現(xiàn)與用戶體驗(yàn)的綜合設(shè)計(jì),通過實(shí)時(shí)限制、提交校驗(yàn)與性能優(yōu)化,開發(fā)者可以高效解決輸入限制問題,同時(shí)提升用戶滿意度和數(shù)據(jù)安全性,本文給大家介紹vue輸入框字符限制的優(yōu)化設(shè)計(jì),感興趣的朋友跟隨小編一起看看吧2024-12-12
因?yàn)関ue的響應(yīng)式是通過 Object.defineProperty 來實(shí)現(xiàn)的，但是數(shù)組的length屬性是不能添加getter和setter，所有無法通過觀察length來判斷。這篇文章主要介紹了為什么Vue不能觀察到數(shù)組length的變化,需要的朋友可以參考下2018-06-06
vue+element實(shí)現(xiàn)打印頁面功能
這篇文章主要介紹了vue+element實(shí)現(xiàn)打印頁面功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
如何使用elementUI組件實(shí)現(xiàn)表格的分頁及搜索功能
最近在使用element-ui的表格組件時(shí),遇到了搜索框功能的實(shí)現(xiàn)問題,這篇文章主要給大家介紹了關(guān)于如何使用elementUI組件實(shí)現(xiàn)表格的分頁及搜索功能的相關(guān)資料,需要的朋友可以參考下2023-03-03
權(quán)限是對(duì)特定資源的訪問許可，所謂權(quán)限控制，也就是確保用戶只能訪問到被分配的資源，這篇文章主要介紹了vue的權(quán)限管理的相關(guān)知識(shí),需要的朋友可以參考下2022-06-06
Vue項(xiàng)目添加動(dòng)態(tài)瀏覽器頭部title的方法
這篇文章主要介紹了Vue項(xiàng)目添加動(dòng)態(tài)瀏覽器頭部title的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要為大家介紹了Vue3通用API功能示例剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
vue實(shí)現(xiàn)聯(lián)動(dòng)選擇
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)聯(lián)動(dòng)選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03