Vue中的$set的使用實(shí)例代碼
Vue —$set
在我們使用vue進(jìn)行開(kāi)發(fā)的過(guò)程中,可能會(huì)遇到一種情況:當(dāng)生成vue實(shí)例后,當(dāng)再次給數(shù)據(jù)賦值時(shí),有時(shí)候并不會(huì)自動(dòng)更新到視圖上去;
當(dāng)我們?nèi)タ磛ue文檔的時(shí)候,會(huì)發(fā)現(xiàn)有這么一句話:如果在實(shí)例創(chuàng)建之后添加新的屬性到實(shí)例上,它不會(huì)觸發(fā)視圖更新。
如下代碼,給 student對(duì)象新增 age 屬性
data () { return { student: { name: '', sex: '' } } } mounted () { // ——鉤子函數(shù),實(shí)例掛載之后 this.student.age = 24 }
原因是:受 ES5 的限制,Vue.js 不能檢測(cè)到對(duì)象屬性的添加或刪除。因?yàn)?Vue.js 在初始化實(shí)例時(shí)將屬性轉(zhuǎn)為 getter/setter,所以屬性必須在 data 對(duì)象上才能讓 Vue.js 轉(zhuǎn)換它,才能讓它是響應(yīng)的。
要處理這種情況,我們可以使用$set()方法,既可以新增屬性,又可以觸發(fā)視圖更新。
但是,值得注意的是,網(wǎng)上一些資料寫(xiě)的$set()用法存在一些問(wèn)題,導(dǎo)致在新接觸這個(gè)方法的時(shí)候會(huì)走一些彎路!
錯(cuò)誤寫(xiě)法:this.$set(key,value)
(ps: 可能是vue1.0的寫(xiě)法)
mounted () { this.$set(this.student.age, 24) }
正確寫(xiě)法:this.$set(this.data,”key”,value')
mounted () { this.$set(this.student,"age", 24) }
總結(jié)
以上所述是小編給大家介紹的Vue中的$set的使用,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
axios簡(jiǎn)單實(shí)現(xiàn)小程序延時(shí)loading指示
這篇文章主要介紹了axios簡(jiǎn)單實(shí)現(xiàn)小程序延時(shí)loading指示,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07淺談Vue render函數(shù)在ElementUi中的應(yīng)用
今天小編就為大家分享一篇淺談Vue render函數(shù)在ElementUi中的應(yīng)用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09element-resize-detector監(jiān)聽(tīng)普通元素的實(shí)現(xiàn)示例
當(dāng)涉及到網(wǎng)頁(yè)元素的實(shí)時(shí)尺寸變化監(jiān)測(cè)時(shí),element-resize-detector?是一個(gè)值得推薦的開(kāi)源庫(kù),本文主要介紹了element-resize-detector監(jiān)聽(tīng)普通元素的實(shí)現(xiàn)示例,感興趣的可以了解一下2024-07-07在 Linux/Unix 中不重啟 Vim 而重新加載 .vimrc 文件的流程
這篇文章主要介紹了在 Linux/Unix 中不重啟 Vim 而重新加載 .vimrc 文件的流程,需要的朋友可以參考下2018-03-03基于Vue的前端界面實(shí)現(xiàn)日期時(shí)間實(shí)時(shí)顯示簡(jiǎn)單代碼
今天在項(xiàng)目中有一個(gè)功能是要求顯示北京的實(shí)時(shí)時(shí)間,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue的前端界面實(shí)現(xiàn)日期時(shí)間實(shí)時(shí)顯示的相關(guān)資料,需要的朋友可以參考下2024-01-01Element修改彈窗類(lèi)組件的層級(jí)的實(shí)現(xiàn)
本文主要介紹了Element修改彈窗類(lèi)組件的層級(jí)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04vue關(guān)于select組件綁定的值為數(shù)字類(lèi)型的問(wèn)題
這篇文章主要介紹了vue關(guān)于select組件綁定的值為數(shù)字類(lèi)型的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09VUE中Echarts的resize事件報(bào)錯(cuò)和移除windows的事件問(wèn)題
這篇文章主要介紹了VUE中Echarts的resize事件報(bào)錯(cuò)和移除windows的事件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07