Vue中处理时间问题
一般情况后台传回来的时间格式是时间戳形式,前端需要自己转化时间,但每次都把后端所传数据forEach出来转化特别麻烦,所以封装一个js就可以通用了。
export function formatDate(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
}
let otime = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
for (let k in otime) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = otime[k] + ''
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
}
}
return fmt
}
function padLeftZero(str) {
return ('00' + str).substr(str.length)
}
在实际页面中使用转化时间格式
1.引入封装的js
import {formatDate} from '../../../assets/js/datatime'
2.使用 Vue的过滤器
filters: {
formatDate(time) {
time = time * 1000;
let date = new Date(time);
console.log(new Date(time));
return formatDate(date, 'yyyy-MM-dd')
}
},
如果只需要年就 return formatDate(date, 'yyyy‘);
只需要月就 return formatDate(date, ‘MM’);
依次类推
在页面中使用时引入| formatDate就好了
<p>提交时间:{{item.createtime | formatDate}}</p>