您好,登錄后才能下訂單哦!
小編這次要給大家分享的是Vue中怎么獲取當(dāng)前時(shí)間并實(shí)時(shí)刷新,文章內(nèi)容豐富,感興趣的小伙伴可以來了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。
1. 實(shí)現(xiàn)代碼
<template> <div> {{nowDate}}{{nowWeek}}{{nowTime}} </div> </template> <script> export default { data(){ return { nowDate: "", // 當(dāng)前日期 nowTime: "", // 當(dāng)前時(shí)間 nowWeek: "" // 當(dāng)前星期 } }, methods:{ dealWithTime(data) { // 獲取當(dāng)前時(shí)間 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() { // 頁(yè)面加載完后顯示當(dāng)前時(shí)間 this.dealWithTime(new Date()) // 定時(shí)刷新時(shí)間 this.timer = setInterval(()=> { this.dealWithTime(new Date()) // 修改數(shù)據(jù)date }, 500) }, destroyed() { if (this.timer) { // 注意在vue實(shí)例銷毀前,清除我們的定時(shí)器 clearInterval(this.timer); } } } </script> <style lang="scss" scope> </style>
2. 實(shí)現(xiàn)效果
看完這篇關(guān)于Vue中怎么獲取當(dāng)前時(shí)間并實(shí)時(shí)刷新的文章,如果覺得文章內(nèi)容寫得不錯(cuò)的話,可以把它分享出去給更多人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。