Vue $nextTick

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

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

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

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

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

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

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

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

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

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

相关推荐
梦6501 分钟前
JavaScript (ES5)+ES6+jQuery 核心对象方法大全
javascript·es6·jquery
馨谙6 分钟前
面试题----用户,组,su,su-,sudo,sudo-,nologin shell
java·前端·数据库
王同学 学出来23 分钟前
React案例实操(二)
前端·react.js·前端框架
向前V31 分钟前
Flutter for OpenHarmony 二维码扫描App实战 - 关于实现
开发语言·javascript·flutter
weixin_4277716133 分钟前
Vite 与 Webpack 模块解析差异
前端·webpack·node.js
永远是我的最爱35 分钟前
基于ASP.NET的图书管理系统的设计与实现
前端·后端·sql·visual studio
广州华水科技43 分钟前
单北斗GNSS技术在变形监测中的应用及其位移监测优势解析
前端
刘晓倩1 小时前
Python内置函数-hasattr()
前端·javascript·python
爱上妖精的尾巴1 小时前
7-10 WPS JS宏 对象使用实例7--拆分单表到多工作簿下的多表
javascript·restful·wps·jsa
C_心欲无痕1 小时前
不点击鼠标也能通过MouseEvent实现点击事件
前端·javascript