Vue.nextTick(function () { // DOM 更新了 }) this.$nextTick(()=>{ // DOM 更新了 })
- ①. 在下一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中需要弹出弹出层,我们都可以使用如下的方式来弹出]