vue數(shù)據(jù)更新UI不刷新顯示的解決辦法
vue比較常見的坑就是數(shù)據(jù)(后臺返回)更新了,但是UI界面并沒有更新,常見于以下情況:
一、數(shù)據(jù)為數(shù)組時(shí)
1.通過數(shù)組索引修改數(shù)組元素例如:
此時(shí)UI數(shù)據(jù)并不會刷新
2.修改數(shù)組長度時(shí):
解決方案:
如果data為JSON數(shù)組則如下:
第一個(gè)參數(shù)為要更新數(shù)據(jù)的數(shù)組,第二個(gè)參數(shù)為要更新的數(shù)組中具體的元素下標(biāo),第三個(gè)參數(shù)為新數(shù)據(jù)
備注:
數(shù)組原型上的方法vue可直接檢測到變化:push(),pop(),shift(),unshift(),splice(),sort()
二、數(shù)據(jù)為對象時(shí):
Vue 不能檢測對象屬性的添加或刪除:你可以這樣添加一個(gè)屬性
如果要添加多個(gè)屬性可以
補(bǔ)充知識:vue computed計(jì)算屬性和watch監(jiān)聽屬性解疑答惑
computed計(jì)算屬性
計(jì)算屬性類似于方法,用于輸出data中定義的屬性數(shù)據(jù)的結(jié)果,data數(shù)據(jù)變化時(shí),計(jì)算屬性的結(jié)果會同步變化,需要注意的是計(jì)算屬性不可與data定義的屬性同名。
相比于方法它的優(yōu)勢是只有當(dāng)依賴的屬性變化時(shí),才會重新計(jì)算。而方法會在每次重新render的時(shí)候都會執(zhí)行,因此計(jì)算屬性相比方法性能明顯更高,而且計(jì)算屬
性可直接綁定在v-model屬性上。計(jì)算屬性還提供get和set方法進(jìn)行讀寫操作。
watch方法
一旦監(jiān)聽了data中的屬性,只要data數(shù)據(jù)變化了會立即觸發(fā)watch方法,watch方法不僅可以監(jiān)聽變量,還可以監(jiān)聽對象里的某個(gè)屬性,甚至是數(shù)組里的某個(gè)元素
html:
javascript:
以上這篇vue數(shù)據(jù)更新UI不刷新顯示的解決辦法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. JavaWeb Servlet中url-pattern的使用2. 淺談SpringMVC jsp前臺獲取參數(shù)的方式 EL表達(dá)式3. asp(vbscript)中自定義函數(shù)的默認(rèn)參數(shù)實(shí)現(xiàn)代碼4. React優(yōu)雅的封裝SvgIcon組件示例5. 輕松學(xué)習(xí)XML教程6. php網(wǎng)絡(luò)安全中命令執(zhí)行漏洞的產(chǎn)生及本質(zhì)探究7. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)8. jsp中sitemesh修改tagRule技術(shù)分享9. ASP基礎(chǔ)知識VBScript基本元素講解10. 詳解瀏覽器的緩存機(jī)制
