如何在vue.js渲染完界面之后调用函数 您所在的位置:网站首页 js页面加载完毕执行一次 如何在vue.js渲染完界面之后调用函数

如何在vue.js渲染完界面之后调用函数

2024-07-11 23:45| 来源: 网络整理| 查看: 265

在使用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 实验室设备网 版权所有