vue 2 怎么把2024-04-13T17:42:19转换成短日期格式

我们在日常开发过程中,通常会将日期格式在entity中设置成LocalDateTime。这样就有一个麻烦,我们在前端展示这个日期的时候就会变成2024-04-13T17:42:19。这显然不是我们所要的效果,所以我们今天来解决这个问题,让前端展示正确的日期格式2024-04-13 17:42:19

目录

[步骤1.安装 'moment' 库](#步骤1.安装 'moment' 库)

步骤2.导入路径

步骤3.在要使用属性中引入

步骤4.在methods方法中编写格式化方法

步骤1.安装**'moment' 库**

如果您的项目中还没有安装 'moment',您需要先通过 npm 或 yarn 将其添加到项目中。使用以下命令之一来安装:

bash 复制代码
npm install moment --save
# 或者
yarn add moment

步骤2.导入路径

在要使用moment库的vue文件中引用moment库,您可以用以下命令引用

bash 复制代码
import moment from 'moment';

步骤3.在要使用属性中引入

bash 复制代码
<el-table-column prop="createTime" label="创建时间" :formatter="dateFormat"></el-table-column>

步骤4.在methods方法中编写格式化方法

bash 复制代码
export default {
  methods: {
    // 编写日期格式化方法
    dateFormat: function (row, column) {
      const date = row[column.property]
      if (date === undefined) {
        return ''
      }
      // 这里的格式根据需求修改
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
  }
}

请注意,日期和时间的格式可能会因地区和语言的不同而有所变化。

相关推荐
愚公移码3 分钟前
蓝凌EKP18产品:流程虚拟机(PVM)
java·开发语言·前端
promiseThen21 分钟前
5 分钟上手 Markdown:标题到表格、代码块与简历实战
前端
web66liang23 分钟前
webpack4+vue2项目使用 sass-embedded 导致的 DockerfIle 构建失败的问题
前端
Larcher25 分钟前
LangChain RAG 排错实录:.env 为什么没有生效
vue.js·后端
Strayer26 分钟前
拓扑管网 3D 可视化大屏demo:科技感(地图 + 拓扑 + 3D 空间)
前端·three.js·数据可视化
葬送的代码人生28 分钟前
从 Vue 到 React:Tailwind CSS 布局 + BFF 代理实战
前端·react.js·架构
摸鱼老王不带834 分钟前
不用后端,纯前端读出"网站眼里你的真实出口 IP"——聊聊 Cloudflare 的 cdn-cgi/trace
前端
程序员黑豆1 小时前
鸿蒙开发入门:Row 和 Column 布局组件详解
前端·harmonyos
hoLzwEge1 小时前
前端环境变量配置指南:.env 文件详解
前端·前端框架
猫头_1 小时前
AI 流式传输工程指南:有了 EventSource 为何还要 Fetch?
javascript·http·llm