Moment.js+Vue过滤器的使用，各种时间格式转换为YYYY-MM-DD HH:mm:ss格式

最新推荐文章于 2023-04-08 12:52:00 发布

火锅店在逃毛肚

最新推荐文章于 2023-04-08 12:52:00 发布

阅读量2.6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： # vue 文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/qq_36818931/article/details/112233886

本文详细介绍了如何在Vue项目中结合Moment.js进行时间格式转换，包括安装Moment.js，创建并使用过滤器，以及解决时间戳转换为YYYY-MM-DD HH:mm:ss格式时可能出现的Invalid date问题。通过实例展示了在模板中正确使用过滤器的方法。

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

前言

这篇文章将Moment.js与vue过滤器连用。如果不会过滤器的朋友，可以先看这篇文章vue过滤器

一、Moment.js是什么？

Moment.js是JavaScript 日期处理类库。使用场景：vue项目中经常需要将时间戳转换为各种时间格式再显示。

二、使用步骤

1.安装

这里只展示Node.js的安装方法。其余安装方式详见Moment.js文档

Node.js安装代码如下（示例）：

npm install moment

2.在过滤器中添加function

我这里省略了过滤器的创建过程，不会过滤器的朋友，可以先看这篇文章vue过滤器

filter.js代码如下（示例）：

import moment from 'moment'   //引用


//添加一个function
let dateFormatter =  function(time, format){
   
   
    if (time == null) return '----'
    var date = moment(time).format(format)
    return date
}

//导出这个function
export {
   
   dateFormatter}

3.在template中使用

假设我页面中要显示这么一个表格，里面包含一个日期，现在使用过滤器来显示指定格式的时间。
数据格式如下：

tableData: [
        {
   
   
          date: "1609840835000", //时间戳为String
          name: "王小虎",

最低0.47元/天解锁文章

200万优质内容无限畅学