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小时制

你可能感兴趣的:(基于VUE实现功能,vue)