Vue中处理后端响应数据的时间格式

在我们进行请求数据接口，发送请求的时候，后端会返回我们所需要的响应数据。里面可能包含一些时间数据。但是后端可能会返回来的时间数据会是数据库的时区时间，就好比这样的：

那我们如何转成普通时间格式呢？

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秒

处理前

处理后

也可以直接写在methods配置项里，通用forEach遍历，得到每一个数据后data.forEach((v)=>moment(v.time).format(“YYYY-MM-DD HH:mm:ss”)) 这里的v是遍历得到每一条数据，time是响应的时间数据。其实和上面是一样的。注意使用前引用插件moment！！