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)文章
vue如何從后臺(tái)獲取數(shù)據(jù)生成動(dòng)態(tài)菜單列表
這篇文章主要介紹了vue如何從后臺(tái)獲取數(shù)據(jù)生成動(dòng)態(tài)菜單列表，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了詳解.vue文件解析的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要給大家介紹了關(guān)于npm踩坑問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了如何讓vue長列表快速加載，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
vue項(xiàng)目中使用crypto-js實(shí)現(xiàn)加密解密方式
這篇文章主要介紹了vue項(xiàng)目中使用crypto-js實(shí)現(xiàn)加密解密方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
本篇文章主要介紹了vue腳手架中配置Sass的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
開發(fā)任務(wù)中有這樣一個(gè)需求，下拉框中需要展示超過5000條數(shù)據(jù)，甚至更多，這數(shù)據(jù)量直接整個(gè)頁面卡死了，就想到在下拉框中加分頁，下面小編通過實(shí)例代碼介紹下Vue下拉框加分頁搜索功能的實(shí)現(xiàn)，感興趣的朋友一起看看吧2022-11-11
這篇文章主要為大家詳細(xì)介紹了vue手寫加載動(dòng)畫項(xiàng)目，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue3+ElementPlus封裝函數(shù)式彈窗組件詳解
這篇文章主要為大家詳細(xì)介紹了如何利用vue3和ElementPlus封裝函數(shù)式彈窗組件，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-08-08
vue elementUI表格控制顯示隱藏對(duì)應(yīng)列的方法
這篇文章主要為大家詳細(xì)介紹了vue elementUI表格控制顯示隱藏對(duì)應(yīng)列的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04