vue 2.1.3 實時顯示當前時間,每秒更新的方法

來源：懂視網責編：小采時間：2020-11-27 22:07:38

vue 2.1.3 實時顯示當前時間,每秒更新的方法

vue 2.1.3 實時顯示當前時間,每秒更新的方法:如下所示： <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>Vue</title> </head> <body> <div id=app> {{date}} </

推薦度：

點擊下載本文 文檔為doc格式

導讀vue 2.1.3 實時顯示當前時間,每秒更新的方法:如下所示： <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>Vue</title> </head> <body> <div id=app> {{date}} </

如下所示：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Vue</title> 
 </head>
 <body> 
 <div id="app">
 {{date}}
 </div>
 <!-- 開發環境版本，包含了用幫助的命令行警告 -->
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script type="text/javascript"> 
 var app = new Vue({
 el:'#app',
 data:{
 date: new Date()
 },
 mounted () {
 var _this = this; //聲明一個變量指向vue實例this,保證作用域一致
 this.timer = setInterval(function() {
 _this.date = new Date();//修改數據date
 }, 1000);
 },
 beforeDestroy () {
 if(this.timer) {
 clearInterval(this.timer);//在vue實例銷毀錢，清除我們的定時器
 }
 } 
 });
 
 </script>
 </body>
</html>