在vue里,使用dayjs格式化时间并实现日期时间的实时更新

介绍

vue里, 通过下载 dayjs 插件, 实现日期的格式化,并实时更新日期。

实现方式

  1. 下载 dayjs
    使用命令: npm install dayjs
  2. 引入
    命令: import dayjs from 'dayjs'

代码:

  1. utils里引入 dayjs,并格式化日期
javascript 复制代码
// 引入 dayjs
import dayjs from 'dayjs';
// 格式化时间  年-月-日 时:分:秒
export const formatDate = () => {
  return dayjs().format('YYYY-MM-DD HH:mm:ss');
}
  1. 页面里引入 utils里的 formatDate 方法 ,并通过 setInterval 实现,日期的实时更新
javascript 复制代码
<div>{{currentTime}}</div>
// 引入 formatDate 
import {  formatDate } from "@/utils/index.js";
import { ref, onMounted ,onUnmounted} from 'vue'
const currentTime = ref('');
let timer = null
const updateTime = () => {
  // 更新 tableData 中的第一行数据
  currentTime.value = formatDate();
}
onMounted(() => {
  // 初始化的时候立即更新一次
  updateTime();
  timer = setInterval(updateTime, 1000)
})
  onUnmounted(() => {
    clearInterval(timer)
  })
相关推荐
摸爬滚打的小李17 分钟前
SameSite Cookie
前端
小毛驴85020 分钟前
Vue 传统全局引入方式,ES 模块化方式引入 对比
前端·javascript·vue.js
Sobeit21 分钟前
2025 年前端人必学!Tailwind CSS 全面解析与实战
前端
一壶纱26 分钟前
vite 只是一个平台
vue.js·vite
xianxin_27 分钟前
HTML CSS
前端
奇怪的知识又增长了32 分钟前
UILabel 字体缩放适应宽度
前端
轻语呢喃35 分钟前
JavaScript数据检索:从顺序到哈希的效率跃迁
javascript·后端
萱萱的七彩鱼37 分钟前
css3之三维变换详说
前端·javascript·css3
遗憾随她而去.38 分钟前
前端css 的固定布局,流式布局,弹性布局,自适应布局,响应式布局
前端·css
liweisum1 小时前
AI驱动 WEB UI自动化---前端技术分享
前端·javascript·typescript