1.nextTick.html 986 B

1234567891011121314151617181920212223242526272829303132
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <div id="app">
  10. <p id="first">{{msg}}</p>
  11. <button @click="changeMain">修改内容</button>
  12. </div>
  13. <script src="../vue初阶/vue.js"></script>
  14. <script>
  15. var vm = new Vue({
  16. data:{
  17. msg:"哈哈哈哈哈"
  18. },
  19. methods: {
  20. changeMain() {
  21. this.msg = '呜呜呜呜';
  22. console.log(document.getElementById("first").innerHTML,'111')
  23. // this.$nextTick 解决数据未及时更新的问题 异步任务微任务
  24. this.$nextTick(()=>{
  25. console.log(document.getElementById("first").innerHTML,'222')
  26. })
  27. }
  28. },
  29. }).$mount("#app")
  30. </script>
  31. </body>
  32. </html>