vue.js格式化時間並每秒更新
阿新 • • 發佈：2019-02-03
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- Vue.js --> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> </head> <body> <div id="app"> <!--# vue.js支援在{{ }}插值的尾部新增一個管道符“(|)”對資料進行過濾，經常用於格式化文字，比如字母全部大寫，貨幣千位使用逗號分隔等。過濾的規則是自定義的，通過給vue例項新增選項filters來設定，例如對顯示時間的格式化處理 #--> {{ date | formatDate }} </div> </body> </html> <script> var myData = { date:new Date() }; //在月份、日期、小時等小於10前面補0 var padDate = function (value) { return value <10 ? '0' + value:value; }; var app = new Vue({ el:'#app', data:myData, filters: { formatDate:function (value) { var date = new Date(value); var year = date.getFullYear(); var month = padDate(date.getMonth()+1); var day = padDate(date.getDate()); var hours = padDate(date.getHours()); var minutes = padDate(date.getMinutes()); var seconds = padDate(date.getSeconds()); return year + '-' + month + '-' + day + '-' + ' ' + hours + ':' + minutes + ':' + seconds; } }, //例項建立完成後呼叫，此階段完成了資料的觀測等，但尚未掛載，$el 還不可用。需要初始化處理一些資料時會比較有用 created:function () { }, //el掛載到例項上後呼叫，一般我們的第一個業務邏輯會在這裡開始 mounted:function () { var _this = this; //宣告一個變數指向Vue例項this，保證作用域一致 this.timer = setInterval(function(){ _this.date = new Date(); //修改資料date },1000) }, //例項銷燬之前呼叫。主要解綁一些使用addEventListener監聽的事件等 beforeDestroy:function(){ if(this.timer){ clearInterval(this.timer); //在Vue例項銷燬前，清除我們的定時器 } } }) </script>