vue.js時間過濾器
首先,資料庫中往往儲存的是時間的毫秒形式,這樣在頁面上可以操控顯示時間的格式。
1. 頁面中: <div class="time">{{rating.rateTime | formatDate}}</div>這裡formatDate時一個過濾器
2. 在頁面js中定義這個過濾器:
import {formatDate} from '../../common/js/date.js'
export default{
data(){
return {}
},
filters:{
formatDate(time){
let date = new Date(time);
return formatDate(date,'yyyy-MM-dd hh:mm');
//此處formatDate是一個函式,將其封裝在common/js/date.js裡面,便於全域性使用
}
}
}
3 定義common/js/date.js 的formatDate函式
export 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){
let str = o[k]+'';
if(new RegExp(`(${k})`).test(fmt)){
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length===1)?str:padLeftZero(str));
} }
return fmt;
};
function padLeftZero(str){
return ('00'+str).substr(str.length);
}
這裡formatDate函式有一個優點,他將可能的時間格式全部都處理了,包括‘09’或者‘9’,年份顯示‘2016’或者‘16’,只需通過傳遞給formatDate函式 格式即可。