前言
这篇文章将Moment.js与vue过滤器连用。如果不会过滤器的朋友，可以先看这篇文章vue过滤器
一、Moment.js是什么？
Moment.js是JavaScript 日期处理类库。使用场景：vue项目中经常需要将时间戳转换为各种时间格式再显示。
二、使用步骤
1.安装
这里只展示Node.js的安装方法。其余安装方式详见Moment.js文档
Node.js安装代码如下(示例)：
npm install moment1
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}1
2
3
4
5
6
7
8
9
10
11
12
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 弄", }, ]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
template中使用：
{{ scope.$index + 1 }}{{ scope.row.date | dateFormatter("YYYY-MM-DD HH:mm:ss") }}{{ scope.row.name }}{{ scope.row.address }}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
页面显示如下：
发现一个问题，时间戳显示为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 弄",
}1
2
3
4
5
最终结果：
总结
以上就是今天要讲的内容，本文仅仅简单介绍了Moment.js+Vue过滤器的使用。
文章来源: blog.csdn.net，作者：火锅店在逃毛肚，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/qq_36818931/article/details/112233886
