概念
this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。
案例
- 如果修改完数据之后向立刻操作DOM元素,就需要使用nextTcik。
- 如果想要在created()中操作DOM,也需要使用nextTcik,因为在此阶段,DOM还未被渲染
- 如果修改完数据之后向立刻操作DOM元素,就需要使用nextTcik。
<template>
<div class="hello">
<div>
<button id="firstBtn" @click="handleClick()" ref="btn">{{msg}}</button>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg:"原始值",
}
},
methods:{
handleClick(){
this.msg="修改后的值";
console.log(this.$refs.btn.innerText); //that.$refs.aa获取指定DOM,输出:原始值
}
}
}
</script>
使用this.$nextTick
methods:{
testClick:function(){
this.msg="修改后的值";
this.$nextTick(() => {
console.log(that.$refs.btn.innerText); //输出:修改后的值
});
}
}
- 如果想要在created()中操作DOM,也需要使用nextTcik,因为在此阶段,DOM还未被渲染
created(){
this.$nextTick(() => { //不使用this.$nextTick()方法会报错
that.$refs.btn.innerHTML="created中更改了按钮内容"; //写入到DOM元素
});
},