vue 中常見的時間格式轉換
更新時間：2022年05月03日 14:00:09 作者：恩婧
這篇文章主要介紹了vue 中常見的時間格式轉換,需要的朋友可以參考下
項目中后臺返回的時間有多種形式，時間戳、ISO標準時間格式等，我們需要轉化展示成能看的懂得時間格式：
1、將2020-06-27T14:20:27.000000Z 時間格式轉換成 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、將時間戳格式化
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(時間格式化插件)；
安裝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中定義成時間格式方法：
import moment from 'moment';
Vue.prototype.$moment = moment;
在vue文件中當作方法使用
this.$moment(timeVal).format('YYYY-MM-DD'); // 2022-02-11更多關于vue常見時間格式轉換請查看下面的相關鏈接
相關文章
vue如何從后臺獲取數(shù)據生成動態(tài)菜單列表
這篇文章主要介紹了vue如何從后臺獲取數(shù)據生成動態(tài)菜單列表，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了詳解.vue文件解析的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要給大家介紹了關于npm踩坑問題的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了如何讓vue長列表快速加載，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-03-03
vue項目中使用crypto-js實現(xiàn)加密解密方式
這篇文章主要介紹了vue項目中使用crypto-js實現(xiàn)加密解密方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
本篇文章主要介紹了vue腳手架中配置Sass的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
開發(fā)任務中有這樣一個需求，下拉框中需要展示超過5000條數(shù)據，甚至更多，這數(shù)據量直接整個頁面卡死了，就想到在下拉框中加分頁，下面小編通過實例代碼介紹下Vue下拉框加分頁搜索功能的實現(xiàn)，感興趣的朋友一起看看吧2022-11-11
這篇文章主要為大家詳細介紹了vue手寫加載動畫項目，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
vue3+ElementPlus封裝函數(shù)式彈窗組件詳解
這篇文章主要為大家詳細介紹了如何利用vue3和ElementPlus封裝函數(shù)式彈窗組件，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2023-08-08
這篇文章主要為大家詳細介紹了vue elementUI表格控制顯示隱藏對應列的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04