nextTick
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM
使用场景:
1.
如果在beforeCreated,created钩子函数中操作dom节点的话,就要使用this.$nextTick(),否则会报错。
beforeCreate(){
this.$nextTick(()=>{
this.$refs.p.color="blue";
})
}
2.v-if后操作节点
<button type="button" @click="change">切换</button>
<div ref="dom" v-if="show">
我在这
</div>
data:{
show:false
},
methods:{
change(){
this.show=!this.show
if(this.show){
this.$nextTick(()=>{ //不写会报Cannot read property 'style' of undefined
this.$refs.dom.style.color="red";
})
}
}