实例的 $nextTick 方法用于在下次 DOM 更新循环结束之后执行延迟回调。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>test</title> 5 <script type="text/javascript" src="https://vuejs.org/js/vue.js"></script> 6 </head> 7 <body> 8 <!-- <div id="app"> --> 9 <button id="app" ref="tar" type="button" v-on:click="testClick">{{ content }}</button> 10 <!-- <button ref="tar" type="button" >{{ content }}</button> --> 11 <!-- </div> --> 12 </body> 13 <script type="text/javascript"> 14 var app = new Vue ({ 15 el:'#app', 16 data(){ 17 return { 18 content:'初始值' 19 } 20 }, 21 methods:{ 22 testClick(){ 23 this.content = '改变了的值' 24 //这会直接打印的话， 由于dom元素还没有更新， 因此打印出来的还是未改变之前的值； 初始值 25 console.log(this.$refs.tar.innerText) //添加ref属性，便于查找 26 }, 27 testClick2(){ 28 this.content='改变了的值2' 29 this.$nextTick(()=>{ 30 //dom元素更新后执行， 因此此处能正确打印出更改之后的值； 改变了的值2 31 console.log(this.$refs.tar.innerText) 32 }) 33 } 34 } 35 }) 36 </script> 37 </html>
button调用testClick与testClick2，显示分别为【改变了的值】与【改变了的值2】，打印console分别为【初始值】与【改变了的值2】