理解Vue中的nextTick

最新推荐文章于 2022-11-10 09:29:18 发布

coodingcc

最新推荐文章于 2022-11-10 09:29:18 发布

阅读量131

点赞数 1

分类专栏：前端 vue

本文链接：https://blog.csdn.net/cristina_song/article/details/95318528

版权

前端同时被 2 个专栏收录

93 篇文章 1 订阅

订阅专栏

vue

9 篇文章 0 订阅

订阅专栏

https://www.jianshu.com/p/a7550c0e164f

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script>

    <title>理解Vue中的nextTick</title>

</head>
<body>
    <div class="app">
        <div ref="msgDiv">{{msg}}</div>
        <div v-if="msg1">Message got outside $nextTick: {{msg1}}</div>
        <div v-if="msg2">Message got inside $nextTick: {{msg2}}</div>
        <div v-if="msg3">Message got outside $nextTick: {{msg3}}</div>
        <button @click="changeMsg">改变消息</button>
    </div>
</body>
</html>
<script>
new Vue({
  el: '.app',
  data: {
    msg: 'Hello Vue.',
    msg1: '',
    msg2: '',
    msg3: ''
  },
  methods: {
    changeMsg() {
      this.msg = "Hello world."
      this.msg1 = this.$refs.msgDiv.innerHTML
      this.$nextTick(() => {
        this.msg2 = this.$refs.msgDiv.innerHTML
      })
      this.msg3 = this.$refs.msgDiv.innerHTML
    }
  }
})
</script>