1. 程式人生 > >顯示當前時間 並且格式化

顯示當前時間 並且格式化

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>

顯示當前時間 並且格式化