this.$nextTick()方法的使用

作用是:等你页面刷新完之后,再执行回调函数中的方法

<div id="app">
      <h1 id="myh">{{msg}}</h1>
      <button @click="change">点击</button>
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello'
        },
        methods: {
          change() {

            this.msg = 'itcast'
            // console.log(document.getElementById('myh').innerText); // 如果直接这样打印,打印出来的结果不是我们想要的itcast,而是hello,因为this.msg = ‘itcast’ 它是异步的
            this.$nextTick(() => {
              console.log(document.getElementById('myh').innerText)
            })
          }
        }
      })
    </script>
posted @ 2019-03-11 15:34  木石天涯  阅读(9445)  评论(0编辑  收藏  举报