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