vue2.0$nextTick監(jiān)聽數(shù)據(jù)渲染完成之后的回調(diào)函數(shù)方法
更新時間：2018年09月11日 08:52:51 作者：fongdaBoy
今天小編就為大家分享一篇vue2.0$nextTick監(jiān)聽數(shù)據(jù)渲染完成之后的回調(diào)函數(shù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
vue里面本身帶有兩個回調(diào)函數(shù)：
一個是`Vue.nextTick(callback)`，當(dāng)數(shù)據(jù)發(fā)生變化，更新后執(zhí)行回調(diào)。
另一個是`Vue.$nextTick(callback)`，當(dāng)dom發(fā)生變化，更新后執(zhí)行的回調(diào)。
栗子：
...
<ul id="demo">
<li v-for="item in list">{{item}}</div>
</ul>
...
new Vue({
el:'#demo',
data:{
list=[0,1,2,3,4,5,6,7,8,9,10]
},
methods:{
push:function(){
this.list.push(11);
this.nextTick(function(){
alert('數(shù)據(jù)已經(jīng)更新')
});
this.$nextTick(function(){
alert('v-for渲染已經(jīng)完成')
})
}
}
})
以上這篇vue2.0$nextTick監(jiān)聽數(shù)據(jù)渲染完成之后的回調(diào)函數(shù)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了在antd4.0中Form使用initialValue操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue使用動態(tài)組件手寫Router View實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue使用動態(tài)組件手寫RouterView實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
在開發(fā)中我們會有各種各樣的模塊依賴,這些模塊可能來自于自己編寫的代碼,也可能來自第三方庫,本文給大家介紹Webpack打包圖片-js-vue的相關(guān)知識,感興趣的朋友跟隨小編一起看看吧2023-11-11
vue和react等項(xiàng)目中更簡單的實(shí)現(xiàn)展開收起更多等效果示例
這篇文章主要介紹了vue和react等項(xiàng)目中更簡單的實(shí)現(xiàn)展開收起更多等效果示例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-02-02
uniapp使用webview內(nèi)嵌H5的注意事項(xiàng)詳解
在移動應(yīng)用開發(fā)中,uniApp框架提供了一種跨平臺的解決方案,允許開發(fā)者使用一套代碼來構(gòu)建iOS、Android等多平臺的應(yīng)用,這篇文章主要給大家介紹了關(guān)于uniapp使用webview內(nèi)嵌H5的注意事項(xiàng),需要的朋友可以參考下2024-07-07
vue實(shí)現(xiàn)echarts餅圖/柱狀圖點(diǎn)擊事件實(shí)例
echarts原生提供了相應(yīng)的API,只需要在配置好echarts之后綁定相應(yīng)的事件即可,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)echarts餅圖/柱狀圖點(diǎn)擊事件的相關(guān)資料,需要的朋友可以參考下2023-06-06
Vue-Access-Control 前端用戶權(quán)限控制解決方案
Vue-Access-Control是一套基于Vue/Vue-Router/axios 實(shí)現(xiàn)的前端用戶權(quán)限控制解決方案。這篇文章主要介紹了Vue-Access-Control：前端用戶權(quán)限控制解決方案,需要的朋友可以參考下2017-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動端觸屏拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了使用Vant完成Dialog彈框案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue-cli3項(xiàng)目生產(chǎn)和測試環(huán)境分包后文件名和數(shù)量不一致解決
這篇文章主要為大家介紹了vue-cli3項(xiàng)目生產(chǎn)和測試環(huán)境分包后文件名和數(shù)量不一致解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05