vue实时显示当前年月日时分秒有时间单位的＜script setup＞写法

在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方法，以显示完整的时间单位信息。

效果图