前端时间转换成正常时间格式输出

方法1：

如果我们从接口获取到的时间格式是这个样子的 2021-04-09T22:54+08:00（UTC世界协调时间），我们应该怎么转换成正常格式输出，让别人都能看明白。

我恰好在弄一个uniapp项目，是弄天气APP的，所以遇到了这个问题。
我用了个笨方法，借助Vue语法的计算属性来实现了。

主要利用了substr(startIndex,num)方法

参数解释：
startIndex 从哪一个位置开始索引
num 要截取几个字符

        computed:{
            date1:function(){
                let temp = this.date;  
                console.log(temp)// 2021-04-09T22:54+08:00
                let date_join = `
                ${temp.substr(0,4)}年
                ${temp.substr(5,2)}月
                ${temp.substr(8,2)}日
                ${temp.substr(11,5)}`
                return date_join
            }
        }

方法2：下面这个例子我尽量写详细点。

模拟数据：比如现在我们从服务器上拿到这样一个格式的时间的字符串。

<view>
    {{UTC_time}}
</view>




data () {
            return {
                UTC_time:"2021-04-20T22:54+08:00"
            }
        },

怎样把这种格式的字符串换成每个人都易懂、带年月日输出的标准规范字符日期。

我们要实现的效果如图：

而不是这个样子的：

所以下面我们开始吧。

完整代码：

<template>
    <view>
        {{standard_time}}
    </view>
</template>

<script>
    export default {
        data () {
            return {
                UTC_time:"2021-04-20T22:54+08:00"
            }
        },
        computed:{
            standard_time:function(){
                //console.log(this.UTC_time)
                let temp = this.UTC_time.split('T')   //split()方法，以T字符为截断，划分成2块，返回一个数组
                const year = temp[0].slice(0,4)  //slice()截取字符，开始--结束
                const month = temp[0].slice(5,7)
                const day = temp[0].slice(8,10)
                
                const time = temp[1].slice(0,5) 
                return `${year}年${month}月${day}日 ${time}`
            }
        }
    }
</script>

效果:

过程剖析：

 let temp = this.UTC_time.split('T')

我们拿到的结构如下：

split('T')方法：表示以T字符作切割划分，返回一个数组。

slice(start,end)方法：截取字符串

方法三：过滤器filters的使用

如果我们拿到的是这样的时间。

模拟数据：

使用过滤的形式：

<text>发布时间:{{item.add_time | formateDate}}</text>




//同data平级
        filters:{
            formateDate(date){  
                const myDate = new Date(date)
                const year = myDate.getFullYear()
                const m = myDate.getMonth()+1
                const month = m.toString().padStart(2,0)//padStart的作用就是将4月变成04月，补0
                //但使用getDay()会出Bug,日期跟我们的对不上，所以需要这样子
                const day = date.slice(8,10)
                const hour = date.slice(11,13)
                const minute = date.slice(14,16)
                //let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'; 三元运算符补0
                return `${year}-${month}-${day} ${hour}:${minute}`
            }
        }

过滤后的结果