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')
    },
  }
}

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

相关推荐
雪芽蓝域zzs1 分钟前
Webstorm打开uniapp uvue文件报红处理方案
vue.js
广州华水科技8 分钟前
北斗形变监测传感器在大坝安全监测中的应用与优势分析
前端
孔令飞15 分钟前
如何学习Go
前端
HUIBUR科技18 分钟前
AI 中枢,面向企业场景构建的 AI 智能体
前端·数据库·人工智能
怕浪猫26 分钟前
给AI配一台电脑,开源版Muse来了,OpenMuse赶紧去二次开发吧
javascript·面试·github
随便写个软件36 分钟前
【新版本】EasyExplorer资源管理器 3.12.0——地址栏重要更新
运维·服务器·前端·everything·资源管理器
Jack N38 分钟前
【Strapi 系列之二】Collection / Single / Component 怎么选?Strapi 字段大全一篇讲透
前端·javascript·strapi
hiahiahia1231 小时前
Agent Tool 执行失败怎么办
服务器·前端
Java后端的Ai之路1 小时前
09-React组件生命周期
前端·react.js·前端框架
撸串-研究生1 小时前
面向景区的综合服务管理平台设计——以稻城亚丁景区为例【附源码】
java·开发语言·vue.js·前后端分离·稻城亚丁景区