vue.nextTick簡單的用法

官方文檔：

 

自己寫了一個小demo：

<template>
    <div>
      <p ref="txt" v-if="show">{{message}}</p>
      <p>{{msg}}</p>
      <button @click="getTxt">點擊</button>
    </div>
</template>

<script>
  export default {
    name: "next-tick",
    data () {
      return {
        show: false,
        message: '原始文本',
        msg: ''
      }
    },
    methods: {
      getTxt () {
        this.show = true
        this.$nextTick(()=> {
          this.msg = this.$refs.txt.innerHTML + '更新獲取文本'
          console.group(this.$refs.txt.innerHTML)
        })
      }
    }
  }
</script>

<style scoped>

</style>

　　總結了一下：如果使用v-show進行顯示隱藏，methods里面是直接可以獲取到文本值，如果用v-if，是不能獲取的文本值的。

　　this.nextTick是在下次dom更新循環完成之后進行調用的