目錄
vue等待數據渲染完成后執行下一個方法
js;"> watch: { dataDetails: function() { this.$nextTick(() => { this.changeView() }); } },
在watch里面寫上要監控的數據,上面的例子是監控,在this.$()勾子里面寫的方法就可以在渲染到頁面完成之后執行方法
vue頁面渲染結束事件
在使用vue.js框架的時候,有時候會希望在頁面渲染完成之后,再執行函數方法來處理初始化相關的操作,如果只處理頁面位置、寬或者高時,必須要在頁面完全渲染之后才可以,頁面沒有加載完成之前頁面渲染完成后執行js,獲取到的寬高不準確。使用過的都知道,有個ready方法可以使用,但vue.js則需要結合watch和方法來使用。
1.下面開始介紹下,在頁面加載一個數據列表完成之后,頁面自動滾動定位到中間某個列表元素,需要在列表數據渲染完成,計算列表高度,再控制定位到指定行。首先介紹下一開始嘗試沒有生效的方案,這也是大家最容易出現錯誤的地方,vue.js提供的函數,表示掛載到實例上去之后調用該鉤子。
2.運行之后,發現執行的時候,獲取到的值不對,打個斷點也可以發現,此時頁面沒有渲染完成,列表塊還是一片空白
3.此時查詢官方api文檔發現,有一個方法,意思是在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法,獲取更新后的 DOM。使用之后發現,還是不能解決我所需要的效果
4.繼續查詢api文檔發現,watch方法,用于觀察Vue實例上的數據變動。對應一個對象,鍵是觀察表達式,值是對應回調,再次嘗試,運行后發現還是不行
5.最終把watch和組合一起,watch:{ :(){ this.(0); }}
對應表格頁面的綁定變量
6.運行后發現,已經達到了預期的效果
注意:這里 watch 要和 方法平級展示
watch:{ htcfOrder:function(){ //頁面渲染完成后的操作 this.$nextTick(function(){ // 開工前 if(vm.htcfOrder !=null && vm.htcfOrder.beforeWorkList !=null && vm.htcfOrder.beforeWorkList.length>0){ for (let i = 0; i < vm.htcfOrder.beforeWorkList.length; i++) { if (vm.htcfOrder.beforeWorkList[i].urlType == 1){ var player2 = videojs(vm.htcfOrder.beforeWorkList[i].extKey+i,{ muted: false,controls : true,height:300,width:300,poster:"",src:"",preload:"auto" },function(){ }); player2.reset(); player2.src(vm.htcfOrder.beforeWorkList[i].extValue); player2.load(); } } } }) } }, methods:{}
以上為個人經驗頁面渲染完成后執行js,希望能給大家一個參考,也希望大家多多支持云海天教程。