在Vue 3中，您可以使用<script setup>语法来编写实时显示当前年月日时分秒并显示时间单位的代码。以下是一个示例：
<template> <div> 当前时间：{{ currentDateTime }} </div> </template> <script setup> import { ref } from 'vue'; const currentDateTime = ref(new Date().toLocaleString('default', { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false })); // 更新时间 setInterval(() => { currentDateTime.value = new Date().toLocaleString('default', { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false }); }, 1000); </script>
在这个例子中，我们使用new Date().toLocaleString('default', {year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false})来获取当前时间的字符串表示形式，并将其作为响应式引用（ref）currentDateTime的初始值。
接下来，我们使用setInterval函数来每秒钟更新一次currentDateTime的值，以实时显示当前时间。在更新时间时，我们传递了不同的参数给toLocaleString方法，以显示完整的时间单位信息。
效果图
