1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue</title> 6 </head> 7 <body> 8 <div id="app"> 9 {{date}} 10 </div> 11 <!-- 開發環境版本，包含了用幫助的命令行警告 --> 12 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 13 <script type="text/javascript"> 14 var app = new Vue({ 15 el:'#app', 16 data:{ 17 date: new Date() 18 }, 19 mounted () { 20 var _this = this; //聲明一個變量指向vue實例this,保證作用域一致 21 this.timer = setInterval(function() { 22 _this.date = new Date();//修改數據date 23 }, 1000); 24 }, 25 beforeDestroy () { 26 if(this.timer) { 27 clearInterval(this.timer);//在vue實例銷毀錢，清除我們的定時器 28 } 29 } 30 }); 31 32 </script> 33 </body> 34 </html>
