1234567891011121314151617181920212223242526272829303132 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- </head>
- <body>
- <div id="app">
- <p id="first">{{msg}}</p>
- <button @click="changeMain">修改内容</button>
- </div>
- <script src="../vue初阶/vue.js"></script>
- <script>
- var vm = new Vue({
- data:{
- msg:"哈哈哈哈哈"
- },
- methods: {
- changeMain() {
- this.msg = '呜呜呜呜';
- console.log(document.getElementById("first").innerHTML,'111')
- // this.$nextTick 解决数据未及时更新的问题 异步任务微任务
- this.$nextTick(()=>{
- console.log(document.getElementById("first").innerHTML,'222')
- })
- }
- },
- }).$mount("#app")
- </script>
- </body>
- </html>
|