大家好，欢迎来到IT知识分享网。

Vue 示例

在JavaScript或Vue中获取当前时间并格式化输出到精确的时分秒，你可以使用Date对象结合字符串拼接或者模板字符串来实现。下面是一个简单示例，展示了如何在Vue中完成这项任务：

<template> <div> <p>当前时间：{{ formattedTime }}</p> </div> </template> <script> export default { data() { return { formattedTime: '' }; }, mounted() { this.updateTime(); setInterval(this.updateTime, 1000); // 每秒更新一次 }, methods: { updateTime() { const now = new Date(); // 使用模板字符串进行格式化 this.formattedTime = `${now.getFullYear()}-${this.padZero(now.getMonth() + 1)}-${this.padZero(now.getDate())} ${this.padZero(now.getHours())}:${this.padZero(now.getMinutes())}:${this.padZero(now.getSeconds())}`; }, // 辅助函数，用于补零操作 padZero(num) { return num < 10 ? '0' + num : num; } }, beforeDestroy() { // 清除定时器，避免内存泄漏 clearInterval(this.timer); } }; </script>

在这个示例中，我们在Vue组件的mounted生命周期钩子中初始化了一个定时器，每秒钟调用updateTime方法来更新当前时间，并在组件销毁前通过beforeDestroy钩子清理定时器。

updateTime方法中，我们创建了一个新的Date对象来获取当前时间，然后使用模板字符串和辅助函数padZero来确保月份、日期、小时、分钟和秒数如果是个位数，则在其前补零，以便格式统一和美观。

这样，页面上就会显示一个实时更新的当前时间，格式为“年-月-日 时:分:秒”。

Vue3 Composition API 示例

在Vue3中，虽然一些API和写法有所变化，但获取和格式化当前时间的基本逻辑与Vue2相似。以下是使用Vue3 Composition API的一个示例：

<template> <div> <p>当前时间：{{ formattedTime }}</p> </div> </template> <script setup> import { ref, onMounted, onBeforeUnmount } from 'vue'; const formattedTime = ref(''); let timer = null; const updateTime = () => { const now = new Date(); formattedTime.value = `${now.getFullYear()}-${padZero(now.getMonth() + 1)}-${padZero(now.getDate())} ${padZero(now.getHours())}:${padZero(now.getMinutes())}:${padZero(now.getSeconds())}`; }; const padZero = (num) => { return num < 10 ? '0' + num : num; }; onMounted(() => { updateTime(); timer = setInterval(updateTime, 1000); // 每秒更新一次 }); onBeforeUnmount(() => { // 清除定时器 clearInterval(timer); }); </script>

在这个Vue3的示例中，我们使用了Composition API来管理状态和生命周期钩子。ref用于定义响应式数据formattedTime，而onMounted和onBeforeUnmount分别替代了Vue2中的mounted和beforeDestroy生命周期钩子。

updateTime函数和padZero辅助函数的功能与Vue2示例相同，用于获取当前时间并进行格式化处理，以及在数字小于10时前面添加零。

这样，你就可以在Vue3应用中实现实时更新并格式化显示当前时间的功能。

TypeScript 公共函数封装

使用TypeScript可以为你的代码增加类型安全。下面是如何封装一个获取并格式化当前时间的公共函数，这个函数可以在Vue3的项目中作为公共方法使用。

首先，在你的Vue3项目的某个公用文件夹（如src/utils）下创建一个名为dateTimeUtils.ts的文件，并编写如下代码：

// src/utils/dateTimeUtils.ts export function formatCurrentTime(): string { const now = new Date(); return `${now.getFullYear()}-${padZero(now.getMonth() + 1)}-${padZero(now.getDate())} ${padZero(now.getHours())}:${padZero(now.getMinutes())}:${padZero(now.getSeconds())}`; } function padZero(num: number): string { return num < 10 ? '0' + num : num.toString(); } 

这个模块导出了一个formatCurrentTime函数，它返回当前时间的格式化字符串。同时，内部使用了padZero辅助函数来保证数字的格式正确。

然后，在你的Vue3组件中，你可以这样使用这个公共函数：

// 某个Vue3组件.vue文件 <script setup lang="ts"> import { onMounted, ref } from 'vue'; import { formatCurrentTime } from '@/utils/dateTimeUtils'; // 根据你的实际路径调整 const formattedTime = ref(''); onMounted(() => { formattedTime.value = formatCurrentTime(); setInterval(() => { formattedTime.value = formatCurrentTime(); }, 1000); }); </script> <template> <div> <p>当前时间：{{ formattedTime }}</p> </div> </template>

这里，我们导入了formatCurrentTime函数，并在组件挂载时设置初始值，之后每秒更新一次显示的时间。注意，为了避免潜在的内存泄漏，如果组件需要销毁时停止时间更新，你可能还需要在适当的生命周期钩子中清除定时器，正如之前Vue2和Vue3 Composition API示例中所示。不过，在此示例中为了保持简洁，省略了该部分代码。