文章目錄
- 前言
- 一、Moment.js是什么？
- 二、使用步驟
- 1.安裝
- 2.在過濾器中添加function
- 3.在template中使用
- 總結
前言
這篇文章將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>
頁面顯示如下：
發現一個問題，時間戳顯示為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過濾器的使用，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/245230.html
標籤：其他
上一篇：使用原生Js實作隨機點名