Vue $nextTick

我们用一个例子来说明$nextTick的作用:

我们用一个变量showIpt来控制input框的显示和隐藏,默认是隐藏。

我们点击一个按钮后显示这个输入框的同时,input还要自动获取焦点。

但是我们点击按钮过后并没有生效。

为什么?this.showIpt=true执行过后接着就是执行this.$refs.ipt.focus() ,所有的代码执行完毕后将解析好的DOM放到页面上去。

也就是说,focus() 的时候DOM还没解析呢!

因此,我们就可以使用$nextTick() 来解决这个问题:

this.$nextTick( // 执行函数 )

$nextTick() 的作用就是在下一次DOM更新结束后执行其指定的回调。

当数据改变后,要对更新后的DOM进行一些操作时,就可以在$nextTick() 的回调函数中执行。

相关推荐
我叫蒙奇15 小时前
JS中的隐式类型转换
前端
他们叫我秃子15 小时前
前端开发转 Go 全栈(四):代码写在前面,却要最后执行?我终于搞懂了 defer
前端·后端·go
生戎马 平安京策15 小时前
只学一点点:我的技术学习策略
前端·javascript·react.js
大鹏说大话16 小时前
HTML5 地理定位 Geolocation:获取用户位置的“红线”与最佳实践
前端·html·html5
Csvn16 小时前
content-visibility: auto —— 让浏览器跳过离屏渲染的性能黑科技
前端
小鹰信息技术服务部16 小时前
Edge安装包MicrosoftEdgeSetup.exe无法运行,点击没反应
前端·edge
webkubor17 小时前
一次前端生产白屏复盘:旧 HTML、Hash 资源和 MIME type text/html
前端·前端工程化
咩咩啃树皮17 小时前
第63篇【终极整合巨作】从零手写原生中后台管理系统|整合62篇全部前端知识点|从头到尾完整架构+全功能逻辑
前端·架构
得物技术18 小时前
实战从零开始构建一个Coding Agent:Violin |得物技术
javascript·架构·llm
Highcharts18 小时前
用Highcharts如何动态向一个序列添加点-示列讲解
前端