首页 > 其他分享 >Vue 异步更新、$nextTick

Vue 异步更新、$nextTick

时间:2023-10-09 22:12:01浏览次数:33  
标签:nextTick 异步 Vue DOM dom 更新

Vue 是异步更新 DOM 的,想要在 dom 更新完成之后做某件事,可以使用 $nextTick

 

 

$nextTick:等 dom 更新后,才会触发执行此方法里的函数体

语法:

this.$nextTick (  () => {

      // 业务逻辑

})

 

eg:

this.$nextTick (  () => {

      this.$refs.inp.focus ()

})

标签:nextTick,异步,Vue,DOM,dom,更新
From: https://www.cnblogs.com/gagaya2/p/17753305.html

相关文章

  • vue显示echarts报错——echarts未在vue界面中定义init——TypeError: Cannot read pro
    问题描述本来按照网上的教程说是想要定义一个全局变量,就不需要在每个需要用到echarts组件的vue页面里面重新定义了,直接使用就行,然后就报错了;问题解决我觉得应该是我的全局变量定义错误了,但是吧,我就直接改成在该vue页面定义了它,然后再使用:就没有再使用到那个全局变量,直接这......
  • 启动vue项目报错——ERROR Error loading vue.config.js: ERROR TypeError: defineCon
    问题描述在我引入echarts模块之前是ok的,引入之后就启动失败了;问题解决一般情况下,都是该项目的版本与本机cmd里面的版本不对应导致的;只需要使用这个命令npmupgrade,更新版本,一直yes下去,就能够解决这个问题啦!......
  • Vue组件各个属性执行顺序问题
    转自:https://blog.csdn.net/m0_62763606/article/details/131694339       在制作波动短视频效果时,在data中定义了一个变量,默认值为null。后来该变量在mounted中被赋值,而后在watch侦听属性中使用立即侦听时使用了该变量却显示为null,后发现这关系到各个组件属性执行顺序问......
  • vue 监视器watch
    监听器案例简单写法:简单写法案例完整写法:完整写法案例:......
  • vue3+ts中使用echarts
    1. 下载npminstall-Secharts2.使用方法一(推荐使用)<divclass="echart_box"ref="echartDom"></div><scriptsetuplang="ts">import*asechartsfrom"echarts";constechartDom=ref()//使用ref创建虚拟DOM引......
  • Ansible 执行过程分析、异步、效率优化
    直观观察任务执行速度插件callback_whitelist=profile_tasks,profile_roles,timer该插件可以直接统计每个task,每个role,每个play执行的时间,方面观察出哪些任务耗时Ansible执行过程分析下面是2.9的默认执行过程分析(简单分析,具体请vvv):获取用户家目录,此处为/root在家目录下创建临......
  • 使用vue-router添加动态路由时遇到的坑
    在开发后台管理的时候,用户登录时需要根据权限来分配路由,这时候可以在路由守卫里通过router.addRoute()方法动态添加路由。importrouterfrom'./router'importstorefrom'./store'importstoragefrom'@/utils/storage'import{asyncRoute}from"@/router/routers";......
  • vue中的循环遍历对象、数组和字符串
    vue循环遍历对象、数组和字符串1.循环遍历对象1.1vue在html里面循环遍历对象v-for="(val,key,i)indimItemMap":key="key" val-每一项key-key值i-第几个<el-table-columnprop="score"label="评分":show-overflow-tooltip="true"ali......
  • 22-Vue组件化编程
    使用传统的方式编写应用传统的方式,一般离不开前端的三大件(HTML、CSS、JS)HTML:HTML是超文本标记语言(HyperTextMarkupLanguage)是用来描述网页的一种语言,负责网页的架构CSS:CSS是一种层叠样式表(级联样式表、样式表),是⼀种标记语⾔,负责网页的样式,美化JavaScript(JS):JS是运行在客户......
  • Vue学习笔记(七):绑定css样式
      1绑定class样式¶vue为HTML绑定css中的class样式是通过v-bind实现的。  1.1绑定单个class¶把需要绑定的样式class名赋值给一遍变量,然后通过变量v-bind绑定class属性,绑定后的class并不会覆盖原来的class属性,而是与原来的class进行叠加。如下所示,d......