Vue $nextTick

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

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

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

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

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

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

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

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

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

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

相关推荐
小poop9 小时前
HTML 基础入门:从结构到常用标签详解
前端
jiangliushi69 小时前
GPT-6.1 Sol 免费用:PowerShell 装 Codex 报“禁止运行脚本 npm.ps1”?一条命令解决
前端·gpt·npm
计算机魔术师9 小时前
日均500万亿词元,国内推理速度翻倍却仍落后国外——差距卡在哪
前端
excel9 小时前
用 Node.js 搭建一套可持续获客的 SEO 内容系统:前端工程师 30 天实战方案
前端·后端
yma1610 小时前
从零搭建 P2P 聊天室:yma16.cloud 在线工具实战
前端·1024程序员节
Mr.Pascal10 小时前
Javascript之什么是作用域?
javascript·1024程序员节
microrain11 小时前
设备报文怎么变,SagooIoT 只约定三个函数名
javascript·物联网·golang·sagooiot
思码梁田11 小时前
CSS 浏览器厂商前缀:从「写 5 遍」到现代自动化兼容
前端·css·css3·border-radius·1024程序员节·box-shadow·厂商前缀
Bug收容所11 小时前
Vue+JS Day3
前端·javascript·vue.js·前端框架·1024程序员节