顯示當前時間 並且格式化
阿新 • • 發佈：2019-03-27
str src nds con tint body title char min
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>顯示當前時間</title> </head> <body> <div id="app"> {{date | formatDate}} </div> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script> // 在月份、日期、小時等小於10時前補0 var padDate = function(value){ return value < 10 ? ‘0‘+ value : value; }; var app = new Vue({ el:‘#app‘, data:{ date: new Date() }, filters:{ formatDate:function(value){// 這裏的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; } }, mounted:function(){ var _this = this;//聲明一個變量指向Vue實例this，保證作用域一致 this.timer = setInterval(function(){ _this.date = new Date();// 修改數據date },1000); }, beforeDestroy:function(){ if(this.timer){ clearInterval(this.timer);// 在Vue實例銷毀前，清除我的的定時器 } } }) </script> </body> </html>
顯示當前時間 並且格式化