如何在vue.js渲染完界面之后调用函数 | 您所在的位置:网站首页 › js页面加载完毕执行一次 › 如何在vue.js渲染完界面之后调用函数 |
在使用vue.js框架的时候,有时候会希望在页面渲染完成之后,再执行函数方法来处理初始化相关的操作,如果只处理页面位置、获取dom元素的宽或者高时,必须要在页面完全渲染之后才可以,页面没有加载完成之前,会导致获取到的宽高或获取的宽高不准确。使用过jquery的都知道,有个ready方法可以使用,但vue.js则需要结合watch和nextTick方法或者利用vue的钩子函数使用 new Vue({ //第一种方法: watch:(){ 自定义方法名:function(){ this.$nextTick(function(){ 此处填第一次渲染完成后执行的代码 }) } }, //第二种方法: mounted:function(){ this.$nextTick(function(){ 此处填第一次渲染完成后执行的代码 }) }, updated:function(){ this.$nextTick(function(){ 此处填每次渲染完后执行的代码 }) }, })注意:有时候我们会想到使用setTimeout() 方法来实现,使用这种方法需要设置个超时执行时间,由于渲染时间无法确定,有快有慢,就会出现不稳定的现象。 |
CopyRight 2018-2019 实验室设备网 版权所有 |