在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)
  })
相关推荐
恋猫de小郭38 分钟前
Compose Hot Reload 为什么只支持桌面 JVM,它和 Live Edit 又有什么区别?
android·前端·flutter
10年前端老司机2 小时前
Vue3项目中使用vue-draggable-plus实现拖拽需求简直不要太丝滑
前端·javascript·vue.js
&白帝&6 小时前
前端实现截图的几种方法
前端
动能小子ohhh7 小时前
html实现登录与注册功能案例(不写死且只使用js)
开发语言·前端·javascript·python·html
小小小小宇7 小时前
大文件断点续传笔记
前端
Jimmy7 小时前
理解 React Context API: 实用指南
前端·javascript·react.js
保持学习ing7 小时前
SpringBoot电脑商城项目--显示勾选+确认订单页收货地址
java·前端·spring boot·后端·交互·jquery
李明一.8 小时前
Java 全栈开发学习:从后端基石到前端灵动的成长之路
java·前端·学习
观默8 小时前
我用AI造了个“懂我家娃”的育儿助手
前端·人工智能·产品
crary,记忆8 小时前
微前端MFE:(React 与 Angular)框架之间的通信方式
前端·javascript·学习·react.js·angular