在Vue 3中,您可以使用语法来编写实时显示当前年月日时分秒并显示时间单位的代码。以下是一个示例:
- <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
方法,以显示完整的时间单位信息。
效果图