视频剪辑软件 WebStorm LVS 测试用例 多线程 二叉树排序 Markdown regex multithreading tsql pointers unix printing webview module scope drupal7 php零基础入门视频 ai视频教程下载 git显示所有远程分支 linux查看jdk安装路径 python怎么调用函数 python的random模块 python自学入门 java基础入门 java入门新手教程 java时间格式化 java文件删除 java集成开发环境 javalist数组 php案例 mac地址修改器 customerrors js四舍五入 props 超星网课助手 免费家谱制作软件 无限弹窗bat fdisk下载 js正则匹配字符串
当前位置: 首页 > 学习教程  > 编程语言

Vue之异步更新机制nextTick(前端)

2020/7/24 10:22:17 文章标签:

  • ①. 在下一DOM更新循环结束之后执行连续的替代。在修改数据之后立即使用此方法,获取更新后的DOM

  • ②. 模板代码

	// 修改数据
	vm.msg = 'Hello'
	// DOM 还没有更新
	Vue.nextTick(function () {
	  // DOM 更新了
	})
	
	// 作为一个 Promise 使用 (2.1.0 起新增,详见接下来的提示)
	Vue.nextTick()
	  .then(function () {
	    // DOM 更新了
	  })
    //作为一个promise使用
   vue.nextTick().then(()=>{
     alert(document.getElementById("xx").value)
    }).finally(()=>{
     alert("我来了")
    })  
  • ③. 具体使用的场景(1) (掌握)
  (1).点击按钮显示原本以 v-show = false 隐藏起来的输入框,并获取焦点
  showsou(){
  this.showit = true //修改 v-show
   //在第一个 tick 里,获取不到输入框,自然也获取不到焦点
  document.getElementById("keywords").focus() 
}
  (2).修改为:
  showsou(){
    this.showit = true
    this.$nextTick(function () {
      // DOM 更新了
      document.getElementById("keywords").focus()
    })
   }
  • ④. 具体使用的场景 (2) (掌握)
    [在以后如果elementUI中需要弹出弹出层,我们都可以使用如下的方式来弹出]

在这里插入图片描述


本文链接: http://www.dtmao.cc/news_show_50247.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?