欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-24 10:34:30
文章目录前言一、Moment.js是什么?二、使用步骤1.安装2.在过滤器中添加function3.在template中使用总结前言这篇文章将Moment.js与vue过滤器连用。如果不会过滤器的朋友,可以先看这篇文章vue过滤器一、Moment.js是什么?Moment.js是JavaScript 日期处理类库。使用场景:vue项目中经常需要将时间戳转换为各种时间格式再显示。二、使用步骤1.安装这里只展示Node.js的安装方法。其余安装方式详见Moment.js文档Node.....


前言

这篇文章将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: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2021W02",
          name: "王二狗",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "20130208T080910,123",
          name: "王三猪",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2017-12-14T16:34",
          name: "王四羊",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2013-02-04T10:35:24-08:00",
          name: "王五猫",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2013-02-04T18:35:24+00:00",
          name: "王六牛",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "Fri Mar 30 2012 08:00:00 GMT+0800",
          name: "王七蛇",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2021-01-05T11:18:47.262Z",
          name: "王八龟",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ]

template中使用:

<el-table :data="tableData" border style="width: 100%">
      <el-table-column label="序号" width="180"
        ><template slot-scope="scope"
          ><span>{{ scope.$index + 1 }}</span></template
        ></el-table-column
      >
      <el-table-column label="日期"
        ><template slot-scope="scope"
          ><span>{{
            scope.row.date | dateFormatter("YYYY-MM-DD HH:mm:ss")
          }}</span></template
        ></el-table-column
      >
      <el-table-column label="姓名"
        ><template slot-scope="scope"
          ><span>{{ scope.row.name }}</span></template
        ></el-table-column
      >
      <el-table-column label="地址"
        ><template slot-scope="scope"
          ><span>{{ scope.row.address }}</span></template
        ></el-table-column
      >
    </el-table>

页面显示如下:
Moment.js+Vue过滤器的使用,各种时间格式转换为YYYY-MM-DD HH:mm:ss格式
发现一个问题,时间戳显示为YYYY-MM-DD HH:mm:ss格式时为无效日期。
这是为什么呢?


4.时间戳显示为Invalid date

使用时间戳转换时间时,要使用

moment(Number) //参数传Number类型

而不是moment(String)
如果使用moment(String)方式,会变成Invalid date

那么将date为时间戳的date改为Number

	{
          date: 1609840835000, //时间戳为Nmber
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
	}

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


总结

以上就是今天要讲的内容,本文仅仅简单介绍了Moment.js+Vue过滤器的使用。

本文地址:https://blog.csdn.net/qq_36818931/article/details/112233886