1. 實現(xiàn)代碼

<template> <div> {{nowDate}}{{nowWeek}}{{nowTime}} </div></template><script>export default { data(){ return { nowDate: '', // 當(dāng)前日期 nowTime: '', // 當(dāng)前時間 nowWeek: '' // 當(dāng)前星期 } }, methods:{ dealWithTime(data) { // 獲取當(dāng)前時間 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() { // 頁面加載完后顯示當(dāng)前時間 this.dealWithTime(new Date()) // 定時刷新時間 this.timer = setInterval(()=> { this.dealWithTime(new Date()) // 修改數(shù)據(jù)date }, 500) }, destroyed() { if (this.timer) { // 注意在vue實例銷毀前，清除我們的定時器 clearInterval(this.timer); } }}</script><style lang='scss' scope></style>

2. 實現(xiàn)效果

總結(jié)

到此這篇關(guān)于Vue 中獲取當(dāng)前時間并實時刷新的實現(xiàn)代碼的文章就介紹到這了,更多相關(guān)vue獲取當(dāng)前時間實時刷新內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！