vue 中常见的时间格式转换

2022-07-15,,,,

项目中后台返回的时间有多种形式,时间戳、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 中常见的时间格式转换.doc》

下载本文的Word格式文档,以方便收藏与打印。