小編給大家分享一下vue中實(shí)例方法和數(shù)據(jù)的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供黃島企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為黃島眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。
1.vm.$set
問題描述:
如何在不通過循環(huán)數(shù)據(jù)給list數(shù)據(jù)添加一個(gè)showMore屬性,并且在moreFun中改變這個(gè)新增屬性的值,并實(shí)現(xiàn)雙向綁定?
- {{v.name}}
一開始小穎并不知道怎么做,而且小穎覺得
這段代碼肯定會報(bào)錯(cuò),然而當(dāng)小穎寫上后發(fā)現(xiàn),并沒有,后來那位帥鍋告訴我,看看vue的 vm.$set 小穎看后將moreFun方法寫為:
moreFun(index) { this.$set(this.list[index], 'showMore', true); console.log(this.list); }
然后就達(dá)到小穎想要的結(jié)果啦。小穎當(dāng)時(shí)遇到的問題類似于這樣的:
- {{v.name}}
問題:當(dāng)執(zhí)行完moreFun方法后,雖然list中的showMore屬性的值變成了true,但是
按鈕 展示更多 仍然顯示著,這是因?yàn)椋绻趯?shí)例創(chuàng)建之后添加新的屬性到實(shí)例上,它不會觸發(fā)視圖更新。
所以后來小穎就將showMore直接添加到list中,然后就好啦?,F(xiàn)在想想其實(shí)用個(gè)vm.$set就解決啦。
2.vm.$watch
用法:
觀察 Vue 實(shí)例變化的一個(gè)表達(dá)式或計(jì)算屬性函數(shù)?;卣{(diào)函數(shù)得到的參數(shù)為新值和舊值。表達(dá)式只接受監(jiān)督的鍵路徑。對于更復(fù)雜的表達(dá)式,用一個(gè)函數(shù)取代。
注意:在變異 (不是替換) 對象或數(shù)組時(shí),舊值將與新值相同,因?yàn)樗鼈兊囊弥赶蛲粋€(gè)對象/數(shù)組。Vue 不會保留變異之前值的副本。
3.vm.$delete
用法:
這是全局 Vue.delete 的別名。
- {{v.name}}
- {{v.age}}
以上是“vue中實(shí)例方法和數(shù)據(jù)的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!