vue实现时间转换功能(年月日时分秒)

原因：中国人习惯上都是以xx年xx月xx日xx时xx分xx秒开始的

需求：将以下时间转为xx年xx月xx日xx时xx分xx秒格式

1. 毫秒数（例如：1642067638245）
2. Fri Jan 01 2021 00:00:00 GMT+0800 (中国标准时间)
3. 2020/01/01
4. … …

转化：

注意：一定要先new Date()，否则会报错 Invalid Date 打印结果为NaN

类型一：页面上只有一条该数据，需要转换

<template>
   <div>
      时间：{{date}}
   <div>
<template>
<script>
   export default {
    data() {
      return {
        date:'',
        result:{},
        httpData:{
          id:''
        }
      }
    },
    methods:{
      changeTime(){
        // vue3 获取接口
        this.$api['接口地址'](this.httpData).then((res) => {
           // 打印res，假如是从res.data.date中取出时间，那么
           this.result = res.data
           // 一定要先创建时间对象
           let DateObj = new Date(this.result.date)
           // 将时间转换为 XX年XX月XX日XX时XX分XX秒格式
           let year = DateObj .getFullYear()
           let month = DateObj .getMonth() + 1
           let day = DateObj .getDate()
           let hh = DateObj .getHours()
           let mm = DateObj .getMinutes()
           let ss = DateObj .getSeconds()
           month = month > 9 ? month : '0' + month
           day = day > 9 ? day : '0' + day
           // 最终时间
           this.date = `${year}年${month}月${day}日${hh}时${mm}分${ss}秒
      }
    }
   }
</script>

效果：

类型二：页面上都多条数据，均为遍历出来的

问题：因为从后台访问出来的接口，我这里数据是一个数组，想一次性把所有的数据日期格式转换出来，最开始想着将数组遍历出来然后在新建空数组，放进去。结果并不如意

解决：最开始想着的是使用过滤器 {{ | }} （vue2支持）

问题：我用的vue3,vue3不支持过滤器，官方建议用计算属性或方法代替过滤器，而不是使用过滤器

解决：方法

<template>
  <div>
     <div v-for="details in detailsList" :key="details">
        <van-cell>
          {{ formatterDate(details.delivery_date) }}
        </van-cell>
     </div>
  </div>
</template>
<script>
   export default(){
      data(){
        rerurn{
           detailsList:[
              {delivery_date:'1642067638245'},
              {delivery_date:'1642067638288'}
           ]
        }
      },
      methods:{
        formatterDate(val) {
          // 将时间转换为 XX年XX月XX日XX时XX分XX秒格式
          let newDateObj = new Date(val)
          let year = newDateObj.getFullYear()
          let month = newDateObj.getMonth() + 1
          let day = newDateObj.getDate()
          let hh = newDateObj.getHours()
          let mm = newDateObj.getMinutes()
          let ss = newDateObj.getSeconds()
          month = month > 9 ? month : '0' + month
          day = day > 9 ? day : '0' + day
          // 发送时间
          return `${year}年${month}月${day}日${hh}时${mm}分${ss}秒`
       }
   }
</script>

写完后发现真机测试，时间格式仍然是AM,PM格式

这时设置手机日期与时间为24小时制