vue 封裝一個全局時間戳轉(zhuǎn)換為YYYY-MM-DD hh:mm:ss過濾器

需求:我們要給用戶展示的時間格式是2018-06-14 08:08:08,但是后臺存儲使用的格式是時間戳。

第一步在vue項目的src目錄下新建common文件夾,在common文件下新建一個filters文件夾,在filters文件夾下新建一個index.js文件。

(個人習慣請自行靈活操作不必死搬硬套。個人習慣把過濾器,公共方法,自定義指令等等都放在common文件下。)

index.js文件夾內(nèi)容

const dateFilter= (time) => {

????if (!time) { // 當時間是null或者無效格式時我們返回空

????????return ' '

????} else {

????????const date = new Date(time) // 時間戳為10位需*1000,時間戳為13位的話不需乘1000

????????const dateNumFun = (num) => num < 10 ? `0${num}` : num // 使用箭頭函數(shù)和三目運算以及es6字符串的簡單操作。因為只有一個操作不需要{} ,目的就是數(shù)字小于10,例如9那么就加上一個0,變成09,否則就返回本身。

? ? // 這是es6的解構(gòu)賦值。

????const [Y, M, D, h, m, s] = [

????????????????date.getFullYear(),

????????????????dateNumFun(date.getMonth() + 1),

????????????????dateNumFun(date.getDate()),

????????????????dateNumFun(date.getHours()),

????????????????dateNumFun(date.getMinutes()),

????????????????dateNumFun(date.getSeconds())

? ? ? ? ]

????????return `${Y}-${M}-${D} ${h}:${m}:${s}` // 一定要注意是反引號,否則無效。

????}

}}

export { dateFilter}

main.js 注冊成全局

import * as custom from '@/common/filters' // 引入我們剛剛創(chuàng)建的文件

// 全局注冊

Object.keys(custom).forEach(key => { Vue.filter(key, custom[key])})

組件中使用

{{ res.date | dateFilter?}}?

大概就是這種效果:如果后臺字段傳過來時是1526634392000,過濾之后就變成了?2018-05-18 17:06:32

若有不解歡迎留言。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,658評論 19 139
  • 北京2018年4月1日上午,NBA常規(guī)賽勇士客戰(zhàn)國王的比賽中,發(fā)生了令人痛心不已的一幕。比賽進行到第三節(jié)還有41...
    Curry_宇閱讀 1,366評論 1 1
  • 8-12章是本書的第二部分:設計交付件 交付件與工件(圖表)的關(guān)系: 在項目實施過程中,作者撰寫一個文檔(設計規(guī)范...
    友交互閱讀 1,433評論 0 2
  • 記得當時年紀小 你愛談天我愛笑 有一回并肩坐在桃樹下 風在林梢鳥兒在叫 我們不知怎樣睡著了 夢里花落知多少 在我的...
    sunny晨雨閱讀 989評論 31 24
  • 每年進入臘月,大人們就忙著采購年貨了,吃的,穿的,用的。我們小孩則是早早的盼望著新年的到來。先是臘月二十三的那天被...
    1e01128ebff4閱讀 445評論 0 0

友情鏈接更多精彩內(nèi)容