菜鸟-创作你的创作

Vue3前端项目实现动态显示当前系统时间详解

lichongyang

下面给你一份 Vue 3（含 Composition API）完整示例 + 自动更新时间 + 文本/数字/格式化教程 的

《Vue 3 前端项目实现动态显示当前系统时间（超详细）》

适合新手 + 实战项目可直接使用。

✅ 一、最简单版：动态显示当前时间（自动更新）

使用 ref + setInterval 就能实时显示时间。

📌 示例代码（Composition API）

<template>
  <div class="time">
    当前时间：{{ now }}
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";

const now = ref("");

function updateTime() {
  const date = new Date();
  now.value = date.toLocaleString(); // 2025/12/05 10:20:30 格式
}

let timer = null;

onMounted(() => {
  updateTime();
  timer = setInterval(updateTime, 1000); // 每秒更新一次
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>

📌 效果：

⭐ 二、使用自定义格式（YYYY-MM-DD HH:mm:ss）

浏览器的 toLocaleString() 格式可能因地区不同而变化，所以实际项目中常用自定义格式：

📌 自定义格式函数

function formatTime(date) {
  const y = date.getFullYear();
  const m = String(date.getMonth() + 1).padStart(2, "0");
  const d = String(date.getDate()).padStart(2, "0");
  const hh = String(date.getHours()).padStart(2, "0");
  const mm = String(date.getMinutes()).padStart(2, "0");
  const ss = String(date.getSeconds()).padStart(2, "0");
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}

📌 在 Vue 中使用

<template>
  <div>
    当前系统时间：{{ now }}
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";

const now = ref("");

function updateTime() {
  const date = new Date();
  now.value = formatTime(date);
}

function formatTime(date) {
  const y = date.getFullYear();
  const m = String(date.getMonth() + 1).padStart(2, "0");
  const d = String(date.getDate()).padStart(2, "0");
  const hh = String(date.getHours()).padStart(2, "0");
  const mm = String(date.getMinutes()).padStart(2, "0");
  const ss = String(date.getSeconds()).padStart(2, "0");
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}

let timer = null;

onMounted(() => {
  updateTime(); 
  timer = setInterval(updateTime, 1000);
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>

🎨 三、加入渐变动画（装饰效果）

.time {
  font-size: 20px;
  color: #42b983;
  font-weight: bold;
  transition: all 0.3s;
}

⚡ 四、Vue 组件封装（可复用）

创建组件 CurrentTime.vue：

<template>
  <span>{{ now }}</span>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";

const now = ref("");

function format(date) {
  return date.toLocaleString();
}

let timer = null;

onMounted(() => {
  now.value = format(new Date());
  timer = setInterval(() => {
    now.value = format(new Date());
  }, 1000);
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>

使用：

<CurrentTime />

🧩 五、使用 Day.js（推荐最简实现）

若项目已装 dayjs：

npm install dayjs

代码：

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import dayjs from "dayjs";

const now = ref("");

let timer = null;

onMounted(() => {
  now.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
  timer = setInterval(() => {
    now.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
  }, 1000);
});

onUnmounted(() => clearInterval(timer));
</script>

⚙ 六、无需 setInterval（使用 requestAnimationFrame）

在高帧率页面中避免卡顿：

function tick() {
  now.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
  requestAnimationFrame(tick);
}
requestAnimationFrame(tick);

🔥 七、终极总结

方法优点缺点
setInterval简单、常用1 秒可能会有微小延迟
requestAnimationFrame高性能每帧执行（需要节流）
dayjs 方案格式强大，国际化需安装依赖

👉 推荐：setInterval + Day.js（简单 + 稳定 + 强大）

退出移动版