vue-$nextTick()

官网说明
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

我们知道,vue中dom更新是异步的,它会在所有数据更新完成后再去更新视图;想要获取更新后的dom,需要使用$nextTick(),它接受一个回调函数,将在dom更新后执行

案例

<template>
  <div>
    <div ref="box">{
    
    {
    
    text}}</div>
    <button @click="change">切换</button>
  </div>
</template>
<script>
export default {
    
    
  data () {
    
    
    return {
    
    
        text:'老故事'
    }
  },
  methods: {
    
    
    change(){
    
    
      this.text='新段子'
      console.log(this.$refs.box.innerText); //老故事
      this.$nextTick(()=>{
    
    
        console.log(this.$refs.box.innerText);  //新段子
      })
    }
  },
}
</script>

猜你喜欢

转载自blog.csdn.net/weixin_51198863/article/details/114107224