vue 中常見的時(shí)間格式轉(zhuǎn)換
更新時(shí)間：2022年05月03日 14:00:09 作者：恩婧
這篇文章主要介紹了vue 中常見的時(shí)間格式轉(zhuǎn)換,需要的朋友可以參考下
項(xiàng)目中后臺(tái)返回的時(shí)間有多種形式，時(shí)間戳、ISO標(biāo)準(zhǔn)時(shí)間格式等，我們需要轉(zhuǎn)化展示成能看的懂得時(shí)間格式：
1、將2020-06-27T14:20:27.000000Z 時(shí)間格式轉(zhuǎn)換成 2020-06-27 14:20:27
可以將方法定義為全局過濾器，或全局方法方便引用
Vue.filter('format', function(date) {
var json_date = new Date(date).toJSON();
return new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
})
{{timeVal | format}}2、將時(shí)間戳格式化
function formatDate(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + ''
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
}
}
return fmt
}
function padLeftZero(str) {
return ('00' + str).substr(str.length)
}
使用方法：
formatDate(date, 'yyyy-MM-dd hh:mm')；
formatDate(date, 'yyyy-MM-dd')；3、Vue中使用moment.js(時(shí)間格式化插件)；
安裝moment.js插件
npm install moment --save
定義全局過濾器
import moment from 'moment';
Vue.filter('dateFormat',function(value,format)){
return moment(value).format(format);
}
使用方法：
{{time | dateFormat('YYYY-MM-DD HH:mm:ss')}}
直接在Vue中定義成時(shí)間格式方法：
import moment from 'moment';
Vue.prototype.$moment = moment;
在vue文件中當(dāng)作方法使用
this.$moment(timeVal).format('YYYY-MM-DD'); // 2022-02-11更多關(guān)于vue常見時(shí)間格式轉(zhuǎn)換請(qǐng)查看下面的相關(guān)鏈接
相關(guān)文章
過濾器的功能是對(duì)要顯示的數(shù)據(jù)進(jìn)行格式化后再顯示,其并沒有改變?cè)镜臄?shù)據(jù),只是產(chǎn)生新的對(duì)應(yīng)的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue中過濾器定義以及使用方法的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue項(xiàng)目中使用websocket的實(shí)現(xiàn)
本文主要介紹了vue項(xiàng)目中使用websocket的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
手把手教你創(chuàng)建vue3項(xiàng)目的最佳方式
如今的Vue3已經(jīng)勢(shì)不可擋,當(dāng)然搭建一個(gè)全新的Vue3項(xiàng)目也有了全新的方式,下面這篇文章主要給大家介紹了關(guān)于如何手把手教你創(chuàng)建vue3項(xiàng)目的最佳方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
vue點(diǎn)擊Dashboard不同內(nèi)容 跳轉(zhuǎn)到同一表格的實(shí)例
這篇文章主要介紹了vue點(diǎn)擊Dashboard不同內(nèi)容 跳轉(zhuǎn)到同一表格的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
基于Vue實(shí)現(xiàn)頁面全屏封裝的詳細(xì)步驟
眾所周知：目前可視化大屏,視頻播放等常見功能都需要用到全屏,本文將使用兩種技術(shù)實(shí)現(xiàn)全屏功能的封裝,讓不同技術(shù)棧的同學(xué)都可以輕松掌握,好了,讓我們來實(shí)現(xiàn)一個(gè)既兼容性強(qiáng)又易于管理的全屏功能組件吧,需要的朋友可以參考下2024-08-08
使用Vuex實(shí)現(xiàn)一個(gè)筆記應(yīng)用的方法
這篇文章主要介紹了使用Vuex實(shí)現(xiàn)一個(gè)筆記應(yīng)用的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
iview-table組件嵌套input?select數(shù)據(jù)無法雙向綁定解決
這篇文章主要為大家介紹了iview-table組件嵌套input?select數(shù)據(jù)無法雙向綁定解決示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了Vue如何提升首屏加載速度實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
Vue實(shí)現(xiàn)active點(diǎn)擊切換方法
下面小編就為大家分享一篇Vue實(shí)現(xiàn)active點(diǎn)擊切換方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
本文主要介紹了elementui彈窗頁按鈕重復(fù)提交問題解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08