溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了vue.js實現格式化時間并每秒更新顯示功能。分享給大家供大家參考，具體如下：
<!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>www.jb51.net vue格式化時間</title>
<!-- Vue.js -->
<script src="https://cdn.bootcss.com/vue/2.5.16/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>
使用本站HTML/CSS/JS在線運行測試工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下測試運行效果：
PS：這里再為大家推薦幾款時間及日期相關工具供大家參考使用：
在線日期/天數計算器：
http://tools.jb51.net/jisuanqi/date_jisuanqi
在線日期計算器/相差天數計算器：
http://tools.jb51.net/jisuanqi/datecalc
在線日期天數差計算器：
http://tools.jb51.net/jisuanqi/onlinedatejsq
Unix時間戳(timestamp)轉換工具：
http://tools.jb51.net/code/unixtime
希望本文所述對大家vue.js程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
