vue3获取当前时间与日期格式化

最新推荐文章于 2025-10-16 16:36:32 发布

原创最新推荐文章于 2025-10-16 16:36:32 发布 · 1.9k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

文章介绍了如何在Vue组件中使用`scriptsetup`语法，通过`ref`和`Date`对象获取并格式化当前时间和日期，每秒自动更新显示。

部署运行你感兴趣的模型镜像

1.获取当前时间格式化

<template>

<div>

<p>当前时间：{{ currentTime }}</p>

</div>

</template>

<script setup>

import { ref, onMounted } from 'vue';

const currentTime = ref('');

onMounted(() => {

updateCurrentTime();

setInterval(updateCurrentTime, 1000); // 每秒更新一次时间

});

function updateCurrentTime() {

const now = new Date();

currentTime.value = now.toLocaleTimeString();

}

</script>

2.获取当前日期格式化

<template>

<div>

         <p>刷新时间: {{ currentYear }}-{{ currentMonth }}-{{currentDay }}</p>

</div>

</template>

<script setup>

        import { ref, onMounted } from 'vue';

        const currentYear = ref('');

        const currentMonth = ref('');

        const currentDay = ref('');

        function updateCurrentDate() {

        const now = new Date();

        currentYear.value = now.getFullYear();

        currentMonth.value = now.getMonth() + 1;

        currentDay.value = now.getDate();

        }

        onMounted(() => {

        updateCurrentDate();

        });

</script>

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

图片生成

Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率