Vue3 setup 实时显示时间_在setup中实时获取年月日时分-CSDN博客

本文链接：https://blog.csdn.net/qq_44285092/article/details/122988144

这篇博客介绍了两种JavaScript时间格式化的方法，并提供了一个实时显示当前日期和时间的Vue组件示例。通过`formateDate`和`formatTime`函数，可以将日期转换为指定格式，如'XXXX年XX月XX日XX时XX分XX秒星期X'或'XXXX年XX月XX日XX时XX分XX秒'。此外，还展示了如何在Vue中设置定时器更新时间显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考地址：https://blog.csdn.net/weixin_44867717/article/details/121724879
格式化时间格式1

// 格式：XXXX年XX月XX日XX时XX分XX秒 星期X
const complement = function (value: any) {
  return value < 10 ? `0${value}` : value;
};

export const formateDate = (date: any) => {
  const time = new Date(date);
  const year = time.getFullYear();
  const month = complement(time.getMonth() + 1);
  const day = complement(time.getDate());
  const hour = complement(time.getHours());
  const minute = complement(time.getMinutes());
  const second = complement(time.getSeconds());
  const week = '星期' + '日一二三四五六'.charAt(time.getDay());
  return `${year}年${month}月${day}日 ${week} ${hour}:${minute}:${second}`;
};

格式化时间格式2

/*
 * XXXX年XX月XX日XX时XX分XX秒 【数字格式】
 */

export const formatTime = (data: Date | string, flag: boolean) => {
  const date = new Date(data);
  const y = date.getFullYear();
  let m: number | string = date.getMonth() + 1;
  m = m < 10 ? '0' + m : m;
  let d: number | string = date.getDate();
  d = d < 10 ? '0' + d : d;
  let h: number | string = date.getHours();
  h = h < 10 ? '0' + h : h;
  let minute: number | string = date.getMinutes();
  minute = minute < 10 ? '0' + minute : minute;
  let second: number | string = date.getSeconds();
  second = second < 10 ? '0' + second : second;
  if (flag) {
    return y + '-' + m + '-' + d;
  }
  return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
};

封装实时显示组件

<script lang="ts" setup>
import { formateDate } from '@/components/date/datetime1';
import { ref, onMounted } from 'vue'
const nowTime = ref("")
onMounted(() => {
    setInterval(() => {
        nowTime.value = formateDate(new Date())
    })
});
</script>

<template>{{ nowTime }}</template>

<style scoped>
</style>