需求:我們要給用戶展示的時間格式是2018-06-14 08:08:08,但是后臺存儲使用的格式是時間戳。
第一步在vue項目的src目錄下新建common文件夾,在common文件下新建一個filters文件夾,在filters文件夾下新建一個index.js文件。
(個人習慣請自行靈活操作不必死搬硬套。個人習慣把過濾器,公共方法,自定義指令等等都放在common文件下。)
index.js文件夾內容
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 // 使用箭頭函數和三目運算以及es6字符串的簡單操作。因為只有一個操作不需要{} ,目的就是數字小于10,例如9那么就加上一個0,變成09,否則就返回本身。
? ? // 這是es6的解構賦值。
????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' // 引入我們剛剛創建的文件
// 全局注冊
Object.keys(custom).forEach(key => { Vue.filter(key, custom[key])})
組件中使用
{{ res.date | dateFilter?}}?
大概就是這種效果:如果后臺字段傳過來時是1526634392000,過濾之后就變成了?2018-05-18 17:06:32
若有不解歡迎留言。