this.$nextTick()函数

作者: 蜗牛和曼巴 | 来源:发表于2018-11-07 21:57 被阅读0次

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1 id="h">{{msg}}</h1>
      <button @click="changemsg">点击改变</button>
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello world'
        },
        methods: {
          changemsg() {
            // 通过this.xxx = '新值' 这种方式去设置值的时候，它是异步的
            this.msg = 'itcast'
            // this.$nextTick()函数作用是等页面的数据更新完成以后，它再执行内部回调函数中的逻辑
            this.$nextTick(() => {
              console.log(document.getElementById('h').innerHTML);
            })
          }
        }
      })
    </script>
  </body>
</html>