Vue $nextTick

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

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

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

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

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

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

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

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

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

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

相关推荐
aixingpan8 小时前
aixingpan.cn API开发文档:api_docs_errors接口指南
前端·php
李剑一8 小时前
前端转AI要了解的技术,其他人不用看。前端架构基础之:让Js的计算运行在GPU上
前端·aigc·ai编程
IT_陈寒8 小时前
Python的列表拷贝坑得我原地打转
前端·人工智能·后端
恋猫de小郭8 小时前
Dart 3.13 的到底改了什么?为什么很重要?有什么坑?
android·前端·flutter
这是个栗子8 小时前
前端开发中的常用工具函数(十):JavaScript 数组遍历
javascript·map·遍历·filter·foreach·for·for...of
FYKJ_20108 小时前
django学习成绩预警系统10905
java·javascript·spring boot·python·spark·django·php
云浪8 小时前
给大模型装上"手":三分钟看懂 AI Agent 的 Tool 工具调用
javascript·人工智能·node.js
风月说与山鬼8 小时前
六、React事件
前端·javascript·react.js
岁岁种桃花儿8 小时前
Vue核心语法第十四篇:列表过滤
前端·javascript·vue.js
晓得迷路了8 小时前
栗子前端技术周刊第 143 期 - npm 攻击事件、Bun 1.4...
前端·javascript