vue使用moment將時間戳轉(zhuǎn)為標準日期時間格式的方法

本篇文章和大家了解一下vue使用moment將時間戳轉(zhuǎn)為標準日期時間格式的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

使用moment將時間戳轉(zhuǎn)為標準日期時間格式

vue網(wǎng)頁中顯示數(shù)據(jù)庫中datetime類型數(shù)據(jù)時，沒有顯示為年-月-日 時：分：秒的標準格式，而是顯示為時間戳，與我們的要求不一致。

我們需要使用moment進行轉(zhuǎn)換

1.安裝moment

npm install moment --save

2.在需要格式轉(zhuǎn)換的vue頁面中引入moment

import moment from 'moment'

3.在 export default中添加filter過濾器和時間轉(zhuǎn)換函數(shù)

filters:{
  dateForm:function (el) {
    return moment(el).format('YYYY-MM-DD HH:mm:ss');
  }
}

4.在template模板中使用

<span>{{scope.row.time|dateForm}}</span>

即在變量名后加上格式轉(zhuǎn)換函數(shù)名

這時，網(wǎng)頁中顯示為標準日期時間格式了

將時間戳轉(zhuǎn)換為日期格式：moment、new Date（）

1.new Date()方式

獲取當前時間的時間戳：

Date.now() //=>1672974684470

將時間戳轉(zhuǎn)換為日期時間：

new Date(1672974684470)
//=>Fri Jan 06 2023 11:11:24 GMT+0800 (中國標準時間)

注意：時間戳標準是以毫秒為單位的，所以一共有13位，如果位數(shù)只有10位，說明它是以秒為單位的。此時要把它轉(zhuǎn)成毫秒單位再進行日期轉(zhuǎn)換，不然時間日期就不對。

獲取年份：

new Date(1672974684470).getFullYear()//=>2023

獲取月份：

new Date(1672974684470).getMonth()//=>0

月份是從0開始計的，1月份就是0；

獲取日期：

new Date(1672974684470).getDate()//=>6

獲取時間戳是星期幾：

new Date(1672974684470).getDay()//=>5

獲取小時：getHours()、獲取分鐘：getMinutes()

2. moment函數(shù)方式

moment：日期格式化函數(shù)

在vue項目中使用這個函數(shù)的步驟：

下載moment模塊：

npm i --save moment --legacy-peer-deps

引入模塊：

import moment from 'moment'

最基本的用法：

//moment().format():格式化當前的時間
console.log(moment().format())//=>2023-01-06T13:21:11+08:00

傳參數(shù)：

• moment()和format()里可以通過傳參數(shù)來設置如何格式化時間：

• 詳情見網(wǎng)址：http://momentjs.cn/

常見的“yyyy-mm-dd”格式：

console.log(moment().format('YYYY-MM-DD'))//=>2023-01-06

將時間戳轉(zhuǎn)換為日期格式：

console.log(moment(1672974684470).format('YYYY-MM-DD'))//=>2023-01-06

3.配合過濾器fliter使用

<div class="grey-text">{{filmInfo.premiereAt | dateFilter}}上映</div>
import Vue from 'vue'
import moment from 'moment'
Vue.filter('dateFilter', (data) => {
  return moment(data * 1000).format('YYYY-MM-DD')
})//乘以1000的原因是，后端給的時間戳是以秒為單位的，在這里換算成毫秒

變換之前的時間戳效果：（后端給的數(shù)據(jù)是時間戳）

1671148800 上映

變換后的日期效果：

2022-12-16 上映

以上就是vue使用moment將時間戳轉(zhuǎn)為標準日期時間格式的方法的簡略介紹，當然詳細使用上面的不同還得要大家自己使用過才領會。如果想了解更多，歡迎關注億速云行業(yè)資訊頻道哦！