html当前日期代码若何在JavaScript/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来确保月份、日期、小时、分钟和秒数如果是个位数，则在其前补零，以便格式统一和都雅。

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

html当前日期代码若何在JavaScript/Vue中获取当前时光并格局化输出准确到时分秒 Docker

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.tsexport 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示例中所示。
不过，在此示例中为了保持简洁，省略了该部分代码。