Vue如何将获取到的时间戳对象转为日期格式?

12 篇文章 0 订阅

在Vue前端开发过程中获取的时间可能获取到的是一段时间戳,这样的数据显示在页面上会影响页面的美观效果,所以大多时候会直接将获取到的时间戳转换成日期格式显示出来.

(1)确保自己的数据已经能显示在页面上可以看到了,否则你转换成功也显示不出来你的转换效果
在这里插入图片描述
(2)在跟自己书写的同页面下新建一个filter文件夹用于存放自己转换日期的js文件
在这里插入图片描述
书写如下代码:

export function dateParse(dataString){
    if(dataString){
      let date = new Date(dataString);
      let Y = date.getFullYear() + '-';
      let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
      let D = (date.getDate()< 10 ? '0'+date.getDate() : date.getDate())+' ';
      let h = (date.getHours()< 10 ? '0'+date.getHours() : date.getHours())+ ':';
      let m = (date.getMinutes()< 10 ? '0'+date.getMinutes() : date.getMinutes())+ ':';
      let s = (date.getSeconds()< 10 ? '0'+date.getSeconds() : date.getSeconds());
      return Y+M+D+h+m+s;  
    }else{
      return '';
    }
    
  }

(3)在同文件夹下的main.js文件中添加一段代码作为导入

所添加代码如下:

import * as filter from './filter'
Object.keys(filter).forEach(key => {
  Vue.filter(key, filter[key])
})

(4)在实际情况运用中
在这里插入图片描述
(5)最终显示效果
在这里插入图片描述

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值