在我们进行请求数据接口,发送请求的时候,后端会返回我们所需要的响应数据。里面可能包含一些时间数据。但是后端可能会返回来的时间数据会是数据库的时区时间,就好比这样的:
那我们如何转成普通时间格式呢?
filters过滤器
1.1什么是filters呢?
filters是vue的一个配置选项,主要是在数据输出到页面之前,进行显示格式处理。
1.2 其特点
(1).过滤器,函数会接收一个参数,函数必须有返回值,对传入数据进行处理
(2).过滤器,无缓存机制,调用次数,取决于页面中有所多少过滤器
(3).过滤器,被作为一个特殊方法处理.
(4).其调用方式为{{ 变量
| 过滤器函数名
}}
1.3语法格式
{{ 变量名 | 过滤器函数名 }}
export default {
components: { }
data() { },
methods: { },
computed: { },
filters: { // 过滤器
函数名(val) {
// 函数中,可以对val进行各种格式处理,返回什么,页面就能输出什么
return xxx
}
}
}
eg:
<template>
<div>
{{ a | fn }} //调用输出
</div>
</template>
<script>
export default {
data(){
return {
a: 9.95945122
}
},
// 过滤器
filters: {
fn(val){
// return val.toUpperCase();
return val.toFixed(2) //处理格式保留2位小数
}
}
}
</script>
2.进入正题 处理时间格式
2.1处理时间格式,我们需要下载moment插件。用yarn add moment -D下载
PS C:\Users\pc\Desktop\外卖\mananger> yarn add moment -D
2.2那个组件需要使用就在那个组件中引入
//引入moment插件
import moment from "moment"
2.3 使用filters处理时间格式
//过滤器
filters:{
timeFn(val){
return moment(val).format("YYYY-MM-DD HH:mm:ss") //这个val是要处理的时间值,用moment的format方法处理数据。
}
},
=这里val是要处理的时间值,用moment的format方法处理数据。YYYY年,MM月,DD日 HH(24小时制 hh12小时制),mm分钟,ss秒
处理前
处理后