溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編這次要給大家分享的是Vue中怎么獲取當前時間并實時刷新，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
1. 實現代碼
<template>
<div>
{{nowDate}}{{nowWeek}}{{nowTime}}
</div>
</template>
<script>
export default {
data(){
return {
nowDate: "", // 當前日期
nowTime: "", // 當前時間
nowWeek: "" // 當前星期
}
},
methods:{
dealWithTime(data) { // 獲取當前時間
let formatDateTime;
let Y = data.getFullYear();
let M = data.getMonth() + 1;
let D = data.getDate();
let H = data.getHours();
let Min = data.getMinutes();
let S = data.getSeconds();
let W = data.getDay();
H = H < 10 ? "0" + H : H;
Min = Min < 10 ? "0" + Min : Min;
S = S < 10 ? "0" + S : S;
switch (W) {
case 0:
W = "日";
break;
case 1:
W = "一";
break;
case 2:
W = "二";
break;
case 3:
W = "三";
break;
case 4:
W = "四";
break;
case 5:
W = "五";
break;
case 6:
W = "六";
break;
default:
break;
}
this.nowDate = Y + "年" + M + "月" + D + "日 ";
this.nowWeek = "周" + W ;
this.nowTime = H + ":" + Min + ":" + S;
// formatDateTime = Y + "年" + M + "月" + D + "日 " + " 周" +W + H + ":" + Min + ":" + S;
},
},
mounted() {
// 頁面加載完后顯示當前時間
this.dealWithTime(new Date())
// 定時刷新時間
this.timer = setInterval(()=> {
this.dealWithTime(new Date()) // 修改數據date
}, 500)
},
destroyed() {
if (this.timer) { // 注意在vue實例銷毀前，清除我們的定時器
clearInterval(this.timer);
}
}
}
</script>
<style lang="scss" scope>
</style>2. 實現效果
看完這篇關于Vue中怎么獲取當前時間并實時刷新的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
