Vue3前端項(xiàng)目實(shí)現(xiàn)動態(tài)顯示當(dāng)前系統(tǒng)時(shí)間詳解
前言
在 Vue3 項(xiàng)目中，動態(tài)顯示當(dāng)前系統(tǒng)時(shí)間是一個(gè)常見的需求，例如在數(shù)據(jù)看板、儀表盤或后臺管理系統(tǒng)中展示“截止時(shí)間”或“當(dāng)前時(shí)間”。本文將詳細(xì)介紹如何使用 Vue3 的 ref 和生命周期鉤子實(shí)現(xiàn)一個(gè)高效、可維護(hù)的動態(tài)時(shí)間顯示組件。
一、實(shí)現(xiàn)思路
1. 核心功能需求
- 實(shí)時(shí)更新：時(shí)間應(yīng)隨系統(tǒng)時(shí)間自動更新（如每分鐘刷新一次）。
- 格式化顯示：時(shí)間需格式化為
YYYY年MM月DD日 HH:MM:SS的形式，并確保個(gè)位數(shù)補(bǔ)零（如08:05:09）。 - 性能優(yōu)化：避免頻繁更新（如每秒更新）導(dǎo)致不必要的渲染開銷。
2. 技術(shù)選型
- Vue3 Composition API：使用
ref管理響應(yīng)式數(shù)據(jù)，onMounted處理初始化邏輯。 - JavaScript Date 對象：獲取系統(tǒng)時(shí)間并格式化。
- 定時(shí)器（setInterval）：控制更新頻率。
二、代碼實(shí)現(xiàn)
1. 模板部分（Template）
在模板中綁定動態(tài)時(shí)間數(shù)據(jù)，并通過 CSS 調(diào)整樣式（如位置、顏色）：
<template>
<div class="app-container">
<h1 class="h2size" style="top: 0%; left: 3%; color: #d1d8e0">
截止時(shí)間：{{ currentDate }}
</h1>
</div>
</template>
<style scoped>
/* 文字樣式 */
.h2size {
color: rgb(166, 202, 244);
position: absolute;
font-size: 1vw;
font-family: 'Arial', sans-serif;
}
</style>
2. 腳本部分（Script）
使用 Vue3 的 setup 語法糖，結(jié)合 ref 和生命周期鉤子實(shí)現(xiàn)邏輯：
<script setup>
import { ref, onMounted } from "vue";
// 響應(yīng)式日期變量
const currentDate = ref('');
// 格式化日期函數(shù)
function formatDateshort(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 補(bǔ)零
const day = String(date.getDate()).padStart(2, '0');
const hour = String(date.getHours()).padStart(2, '0');
const minute = String(date.getMinutes()).padStart(2, '0');
const second = String(date.getSeconds()).padStart(2, '0');
return `${year}年${month}月${day}日 ${hour}:${minute}:${second}`;
}
// 組件掛載時(shí)初始化時(shí)間并設(shè)置定時(shí)器
onMounted(() => {
// 初始時(shí)間
currentDate.value = formatDateshort(new Date());
// 每分鐘更新一次時(shí)間
setInterval(() => {
currentDate.value = formatDateshort(new Date());
}, 60000); // 60秒更新一次
});
</script>
三、關(guān)鍵點(diǎn)解析
1. 時(shí)間格式化
問題：直接使用 date.getHours() 等方法返回的是數(shù)字（如 5），需補(bǔ)零為 05。
解決方案：通過 String().padStart(2, '0') 實(shí)現(xiàn)個(gè)位數(shù)補(bǔ)零：
const minute = String(date.getMinutes()).padStart(2, '0');
2. 性能優(yōu)化
避免每秒更新：使用 setInterval 每分鐘（60000ms）更新一次，減少渲染壓力。
清理定時(shí)器：在組件卸載時(shí)（onBeforeUnmount）清除定時(shí)器（本文未展示，但實(shí)際項(xiàng)目中建議添加）。
3. 響應(yīng)式數(shù)據(jù)
ref 的使用：currentDate 是響應(yīng)式變量，模板會自動更新當(dāng)值變化時(shí)。
四、擴(kuò)展功能
1. 自定義更新頻率
可通過 props 傳入更新間隔（如每秒/每分鐘）：
const props = defineProps({
updateInterval: { type: Number, default: 60000 }
});
onMounted(() => {
setInterval(() => {
currentDate.value = formatDateshort(new Date());
}, props.updateInterval);
});
2. 國際化支持
修改 formatDateshort 函數(shù)，支持多語言格式：
function formatDateshort(date, locale = 'zh-CN') {
return date.toLocaleString(locale, {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false
});
}
五、完整代碼示例
<template>
<div class="app-container">
<h1 class="h2size">截止時(shí)間：{{ currentDate }}</h1>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
const currentDate = ref('');
let timer = null;
function formatDateshort(date) {
const pad = num => String(num).padStart(2, '0');
return `${date.getFullYear()}年${pad(date.getMonth() + 1)}月${pad(date.getDate())}日 ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
}
onMounted(() => {
currentDate.value = formatDateshort(new Date());
timer = setInterval(() => {
currentDate.value = formatDateshort(new Date());
}, 60000);
});
onBeforeUnmount(() => {
clearInterval(timer); // 清理定時(shí)器
});
</script>
<style scoped>
.h2size {
color: rgb(166, 202, 244);
position: absolute;
font-size: 1vw;
font-family: 'Arial', sans-serif;
}
</style>
六、效果
總結(jié)
通過 Vue3 的響應(yīng)式數(shù)據(jù)和生命周期鉤子，可以輕松實(shí)現(xiàn)動態(tài)時(shí)間顯示。關(guān)鍵點(diǎn)包括：
- 使用
ref管理動態(tài)數(shù)據(jù)。 - 通過
padStart補(bǔ)零格式化時(shí)間。 - 合理設(shè)置更新頻率（如每分鐘）平衡實(shí)時(shí)性和性能。
實(shí)際項(xiàng)目中，可進(jìn)一步擴(kuò)展為可配置的組件，支持多語言或自定義格式。
到此這篇關(guān)于Vue3前端項(xiàng)目實(shí)現(xiàn)動態(tài)顯示當(dāng)前系統(tǒng)時(shí)間詳解的文章就介紹到這了,更多相關(guān)Vue3動態(tài)顯示系統(tǒng)時(shí)間內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了vite+vue3使用@路徑報(bào)錯(cuò)處理,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11
vue?+?ele?實(shí)現(xiàn)下拉選擇框和下拉多選選擇框處理方案
這篇文章主要介紹了vue?+?ele?實(shí)現(xiàn)下拉選擇框和下拉多選選擇框處理方案,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
Vue2使用vue-video-player實(shí)現(xiàn)斷點(diǎn)續(xù)傳功能
斷點(diǎn)續(xù)傳是指在文件傳輸過程中,如果傳輸被中斷或者發(fā)生錯(cuò)誤,可以從上一次中斷的地方繼續(xù)傳輸,而不是從頭開始,這對于大文件的傳輸尤為重要,本文給大家介紹了Vue2使用vue-video-player實(shí)現(xiàn)斷點(diǎn)續(xù)傳功能,需要的朋友可以參考下2025-07-07
用Vue.js方法創(chuàng)建模板并使用多個(gè)模板合成
在本篇文章中小編給大家分享了關(guān)于如何使用Vue.js方法創(chuàng)建模板并使用多個(gè)模板合成的相關(guān)知識點(diǎn)內(nèi)容，需要的朋友們學(xué)習(xí)下。2019-06-06
vue-quill-editor插入圖片路徑太長問題解決方法
這篇文章主要介紹了vue-quill-editor插入圖片路徑太長問題解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章介紹了VUE中v-if與v-show的區(qū)別，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
下面小編就為大家分享一篇vue.js,ajax渲染頁面的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue.extend,mixins和vue.component的區(qū)別及說明
Vue.extend 創(chuàng)建Vue的子類,可視為組件構(gòu)造函數(shù),Vue.mixin 允許全局添加方法或?qū)傩?方便所有組件使用,Vue.component 是插件注冊方法,通過Vue.extend創(chuàng)建的組件實(shí)例可以注冊到Vue全局,使其在任何組件中可用2024-09-09
Vue打包項(xiàng)目并部署到Linux服務(wù)器中的全過程
文章介紹了如何使用Vue進(jìn)行項(xiàng)目打包,并部署到Linux服務(wù)器上,包括配置vue.config.js文件、創(chuàng)建config.js文件以更改請求地址、封裝axios請求、打包命令、部署到服務(wù)器、配置nginx以及隱藏后臺服務(wù)地址的方法2026-02-02
Vue實(shí)例初始化為渲染函數(shù)設(shè)置檢查源碼剖析
這篇文章主要為大家介紹了Vue實(shí)例初始化為渲染函數(shù)設(shè)置檢查源碼剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08