过滤器的使用,各种时间格式转换为YYYY"/>
Moment.js+Vue过滤器的使用,各种时间格式转换为YYYY
文章目录
- 前言
- 一、Moment.js是什么?
- 二、使用步骤
- 1.安装
- 2.在过滤器中添加function
- 3.在template中使用
- 4.时间戳显示为Invalid date
- 总结
前言
这篇文章将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", //时间戳为Stringname: "王小虎",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>
页面显示如下:
发现一个问题,时间戳显示为YYYY-MM-DD HH:mm:ss格式时为无效日期。
这是为什么呢?
4.时间戳显示为Invalid date
使用时间戳
转换时间时,要使用
moment(Number) //参数传Number类型
而不是moment(String)
如果使用moment(String)方式,会变成Invalid date
那么将date为时间戳的date改为Number
{date: 1609840835000, //时间戳为Nmbername: "王小虎",address: "上海市普陀区金沙江路 1518 弄",}
最终结果:
总结
以上就是今天要讲的内容,本文仅仅简单介绍了Moment.js+Vue过滤器的使用。
更多推荐
Moment.js+Vue过滤器的使用,各种时间格式转换为YYYY
发布评论