VUE 實(shí)現(xiàn)動(dòng)態(tài)給對(duì)象增加屬性，并觸發(fā)視圖更新操作示例
本文實(shí)例講述了VUE 實(shí)現(xiàn)動(dòng)態(tài)給對(duì)象增加屬性，并觸發(fā)視圖更新操作。分享給大家供大家參考，具體如下：
在開(kāi)發(fā)過(guò)程中，我們時(shí)常會(huì)遇到這樣一種情況：當(dāng)vue的data里邊聲明或者已經(jīng)賦值過(guò)的對(duì)象或者數(shù)組（數(shù)組里邊的值是對(duì)象）時(shí)，向?qū)ο笾刑砑有碌膶傩?，如果更新此屬性的值，是不?huì)更新視圖的。
根據(jù)官方文檔定義：如果在實(shí)例創(chuàng)建之后添加新的屬性到實(shí)例上，它不會(huì)觸發(fā)視圖更新。
Vue 不允許在已經(jīng)創(chuàng)建的實(shí)例上動(dòng)態(tài)添加新的根級(jí)響應(yīng)式屬性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法將響應(yīng)屬性添加到嵌套的對(duì)象上。
我們編寫如下代碼測(cè)試給一個(gè)對(duì)象動(dòng)態(tài)添加屬性：
<div id="app">
<input v-model="form.amount" />
<input type="button" @click="demoSet()" value="setName">
</div>
<script type="text/javascript">
var vm=new Vue({
el: "#app",
data: {
i:0,
form:{}
},
methods:{
demoSet(){
this.form.amount=this.i++;
//this.$set(this.form,"amount",this.i++);
}
}
});
</script>
這種方式可以給form增加一個(gè)屬性，但是不會(huì)界面不會(huì)響應(yīng)更新。
正確的做法：
<div id="app">
<input v-model="form.amount" />
<input type="button" @click="demoSet()" value="setName">
</div>
<script type="text/javascript">
var vm=new Vue({
el: "#app",
data: {
i:0,
form:{}
},
methods:{
demoSet(){
this.$set(this.form,"amount",this.i++);
}
}
});
</script>
這樣就可以給對(duì)象添加amount 屬性了。
這個(gè)有什么應(yīng)用場(chǎng)景呢，比如 data.form 屬性很多，其中大部分是不需要要的，這時(shí)候，可以使用這種方法實(shí)現(xiàn)動(dòng)態(tài)添加需要的屬性。
需要注意的是，這種方式是不能給根數(shù)據(jù)添加屬性的，比如：
<div id="app">
<input v-model="name" />
<input type="button" @click="demoSet()" value="setName">
</div>
<script type="text/javascript">
var vm=new Vue({
el: "#app",
data: {
},
methods:{
demoSet(){
this.$set(this,"name","ray");
}
}
});
</script>
這種方式給data 增加一個(gè) name 屬性是無(wú)效的。
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
Vue.js基礎(chǔ)學(xué)習(xí)之class與樣式綁定
這篇文章主要為大家介紹了Vue.js的Class與樣式綁定,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家詳細(xì)介紹了vue拖拽組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
vue2?element?實(shí)現(xiàn)表格點(diǎn)擊詳情返回時(shí)保留查詢參數(shù)的示例代碼
這篇文章主要介紹了vue2?element?實(shí)現(xiàn)表格點(diǎn)擊詳情返回時(shí)保留查詢參數(shù)的示例代碼,本文通過(guò)圖文示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03
vue管理系統(tǒng)項(xiàng)目中的一些核心技能匯總
Vue是當(dāng)今增長(zhǎng)最快的前端框架,Vue 平易近人、用途廣泛且性能卓越,它的語(yǔ)法非常直觀,并且具有友好的學(xué)習(xí)曲線,是開(kāi)發(fā)人員最想學(xué)習(xí)的頂級(jí)前端庫(kù)之一,下面這篇文章主要給大家介紹了關(guān)于vue管理系統(tǒng)項(xiàng)目中的一些核心技能,需要的朋友可以參考下2022-05-05
Vue 實(shí)現(xiàn)簡(jiǎn)易多行滾動(dòng)"彈幕"效果
這篇文章主要介紹了Vue 實(shí)現(xiàn)簡(jiǎn)易多行滾動(dòng)“彈幕”效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
基于Vue實(shí)現(xiàn)我的錢包充值功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何基于Vue實(shí)現(xiàn)我的錢包充值功能,文中的示例代碼簡(jiǎn)潔易懂,具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2024-01-01
這篇文章主要給大家介紹了Vue3自定義指令的相關(guān)資料,自定義指令是一種在Vue應(yīng)用程序中擴(kuò)展HTML標(biāo)簽的能力,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
vue相同路由跳轉(zhuǎn)強(qiáng)制刷新該路由組件操作
這篇文章主要介紹了vue相同路由跳轉(zhuǎn)強(qiáng)制刷新該路由組件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要介紹了深入理解vue-class-component源碼閱讀，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
Vue中splice()方法對(duì)數(shù)組進(jìn)行增刪改等操作的實(shí)現(xiàn)
vue中對(duì)數(shù)組的元素進(jìn)行刪除,以前一直以為這個(gè)方法是vue中特有的,后來(lái)百度之后才知道原來(lái)是js的一個(gè)寫法,下面這篇文章主要給大家介紹了關(guān)于Vue中splice()方法對(duì)數(shù)組進(jìn)行增刪改等操作的實(shí)現(xiàn)方法,需要的朋友可以參考下2023-05-05