vue之转换时间戳

Tom2Code

发布于 2022-04-15 16:39:04

1.8K0

发布于 2022-04-15 16:39:04

文章被收录于专栏：Tom

JS获取当前时间戳，可以通过Date.now()方法来实现，返回自1970年1月1日00:00:00 UTC以来经过的毫秒数也就是当前时间戳。

我们可以在浏览器的console命令行里输入Date.now()

就可以看到一个很大的数字，因为这个数字是毫秒数，所以位数很大。

可是同时我们也面临一个问题，如何把时间戳转换为一个对我们用户或者程序员友好的日期格式呢。

今天用vue的三种方式来实现。

实现之前，我们需要引用一个轻量的js库，

day.js

介绍如下：

Day.js is a minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API. If you use Moment.js, you already know how to use Day.js. Github

一个简单的用法示例：

dayjs().startOf('month').add(1, 'day').set('year', 2018).format('YYYY-MM-DD HH:mm:ss');

在format里传入我们需要的参数即可

Format	Output	Description
YY	18	两位数的年份
YYYY	2018	四位数的年份
M	1-12	月份，从 1 开始
MM	01-12	月份，两位数
MMM	Jan-Dec	简写的月份名称
MMMM	January-December	完整的月份名称
D	1-31	月份里的一天
DD	01-31	月份里的一天，两位数
d	0-6	一周中的一天，星期天是 0
dd	Su-Sa	最简写的一周中一天的名称
ddd	Sun-Sat	简写的一周中一天的名称
dddd	Sunday-Saturday	一周中一天的名称
H	0-23	小时
HH	00-23	小时，两位数
m	0-59	分钟
mm	00-59	分钟，两位数
s	0-59	秒
ss	00-59	秒两位数
SSS	000-999	秒三位数
Z	+5:00	UTC 的偏移量
ZZ	+0500	UTC 的偏移量，数字前面加上 0
A	AM	PM
a	am	pm

这里是一些常用的参数

当我们引用了dayjs之后，会有一个内置对象dayjs，直接使用即可。

所以这里直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.0/dayjs.min.js"></script>
</head>
<body>
<div id="root">
    <h1>modified time format:</h1>
    <h2>计算属性方式：{{fullTime}}</h2>
    <h2>方法：{{getRealTime()}}</h2>
    <h2>自定义过滤器:{{time | timeFormatter}}</h2>
    <h2>自定义过滤器带指定参数：{{time | timeFormatter('YYYY_MM_DD')}}</h2>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false;
    new Vue({
        el:'#root',
        data:{
            time:1649551134119,
        },
        computed:{
            fullTime(){
                return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss")
            }
        },
        methods:{
            getRealTime(){
                return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss")
            }
        },
        filters:{
            timeFormatter(value,str='YYYY年MM月DD日 HH:mm:ss'){
                return dayjs(value).format(str)
            }
        }
    })
</script>
</body>
</html>

运行结果如下：