首页 > 其他 > 详细

vue更新DOM之后的回调方法

时间:2021-07-28 18:08:50      阅读:21      评论:0      收藏:0      [点我收藏+]

为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。

在组件内使用 vm.$nextTick() 实例方法特别方便,因为它不需要全局 Vue,并且回调函数中的 this 将自动绑定到当前的 Vue 实例上。
例如,清空输入框之后光标定位到输入框

<div class="dataSearch fr">
  <input type="text" class="dataSearch_input fl" ref="searchinput" v-model="searchval" placeholder="搜索">
  <input type="button" class="dataSearch_bnt fl" @click="search">
  <i class="cancelSearch" v-show="searchval" @click="searchval=‘‘;$nextTick(() => $refs.searchinput.focus());"></i> 
</div>

 

methods下写:

methods: {
    ondbclick() {
        this.isEdit = true;
        this.$nextTick(() => this.$refs.editTask.focus());
    },
}

 

vue更新DOM之后的回调方法

原文:https://www.cnblogs.com/yycc11/p/15071547.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!