文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

在vue.js渲染完界面后怎么再调用函数

2023-07-02 15:04

关注

这篇文章主要讲解了“在vue.js渲染完界面后怎么再调用函数”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“在vue.js渲染完界面后怎么再调用函数”吧!

vue.js渲染完界面后调用函数

在使用vue.js框架的时候,有时候会希望在页面渲染完成之后,再执行函数方法来处理初始化相关的操作,如果只处理页面位置、宽或者高时,必须要在页面完全渲染之后才可以,页面没有加载完成之前,获取到的宽高不准确。

使用过jquery的都知道,有个ready方法可以使用,但vue.js则需要结合watch和nextTick方法来使用。

1.下面开始介绍下

在页面加载一个数据列表完成之后,页面自动滚动定位到中间某个列表元素,需要在列表数据渲染完成,计算列表高度,再控制定位到指定行。

首先介绍下一开始尝试没有生效的方案,这也是大家最容易出现错误的地方,vue.js提供的mounted函数,表示挂载到实例上去之后调用该钩子。

在vue.js渲染完界面后怎么再调用函数

2.运行之后

发现mounted执行的时候,获取到的height值不对,打个断点也可以发现,此时页面没有渲染完成,列表块还是一片空白

在vue.js渲染完界面后怎么再调用函数

3.此时查询官方api文档发现

有一个nextTick方法,意思是在下次 DOM 更新循环结束之后执行延迟回调。

在修改数据之后立即使用这个方法,获取更新后的 DOM。

使用之后发现,还是不能解决我所需要的效果

在vue.js渲染完界面后怎么再调用函数

4.继续查询api文档发现

watch方法,用于观察Vue实例上的数据变动。

对应一个对象,键是观察表达式,值是对应回调,再次尝试,运行后发现还是不行

在vue.js渲染完界面后怎么再调用函数

5.最终把watch和nextTick组合一起

watch:{    showList:function(){        this.goPrice(0);    }}

showList对应表格页面的绑定变量

<tr v-for="(item,index) in showList">

在vue.js渲染完界面后怎么再调用函数

6.运行后发现

已经达到了预期的效果

在vue.js渲染完界面后怎么再调用函数

最后说明下,有时候我们会想到使用setTimeout的方式来实现,使用这种方式需要设置个超时执行时间,由于渲染时间无法确定,有快有慢,就会出现不稳定的现象。

vue渲染完成事件

vue里面本身带有两个回调函数

栗子:

...<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('数据已经更新')            });            this.$nextTick(function(){                alert('v-for渲染已经完成')            })        }    }})

感谢各位的阅读,以上就是“在vue.js渲染完界面后怎么再调用函数”的内容了,经过本文的学习后,相信大家对在vue.js渲染完界面后怎么再调用函数这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯