-
this.$nextTick(()=>{ }) 将回调函数中的操作放到下一次DOM更新之后执行,类似全局方法vue.nextTick,只不过 this.$nextTick 只作用于调用它的实例
-
代码示例
<template>
<button ref="ctyBtn"
@click="clickHandle">{{content}}</button>
</template>
<script>
export default {
data () {
return {
content: '初始值'
}
},
methods: {
clickHandle () {
this.content = '改变了的值'
// 这时候直接打印的话,由于dom元素还没更新
// 因此打印出来的还是未改变之前的值
this.$nextTick(() => {
// dom元素更新后执行,因此这里能正确打印更改之后的值
console.log('1 ' + this.$refs.ctyBtn.innerText) // 改变了的值
})
console.log('2 ' + this.$refs.ctyBtn.innerText) // 初始值
}
}
}
</script>
- 打印结果