vue中怎么根据时间戳判断对应的时间
导读:本文共3897.5字符,通常情况下阅读需要13分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 根据时间戳 来显示对应的时间段本文是根据vue缩写,但是原理都是想通的根据一个时间戳,然后来显示对应的时间段。如果为今天,则显示对应的time,如果为昨天,则显示为昨天,如果为前天,则显示为前天。剩下的显示为对应的日期需求定义好了,然后开始实现:首先,是把时间戳转换为对应的时间格式,js提供了原生的获取对应年、月、日等格式的方法,但是不够灵活,这里提供了一个网上... ...
目录
(为您整理了一些要点),点击可以直达。根据时间戳 来显示对应的时间段
本文是根据vue缩写,但是原理都是想通的
根据一个时间戳,然后来显示对应的时间段。如果为今天,则显示对应的time,如果为昨天,则显示为昨天,如果为前天,则显示为前天。剩下的显示为对应的日期
需求定义好了,然后开始实现:
首先,是把时间戳转换为对应的时间格式,js提供了原生的获取对应年、月、日等格式的方法,但是不够灵活,这里提供了一个网上找的比较灵活获取固定格式的函数。
使用这个函数,需要提供一个时间戳和一个日期格式。
接下来是使用过滤器来对时间戳进行过滤。vue提供了过滤器,可以定义全局过滤器和本地过滤器,我们定义一个本地过滤器
定义好了过滤器,就可以在页面中使用了
// index.vue
使用|(管道符)来对时间戳进行过滤,管道符左侧为过滤器的第一个参数,第二个参数为过滤的格式。定义好之后就会根据格式显示对应的时间格式了。
接下来最后一步就是对比今天的日期,来显示对应的时间(昨天,前天)
这里使用vue的if else来判断应该显示哪种日期格式。
好了,以上是根据日期去比较来显示对应的时间。—— 但是,你以为完了吗?
有一个重要的问题就是,每个月都有30日中的其中一日,今天是12月18日,比较18相等,显示对应的时间,但是如果为11月18日呢?如果还显示对应的时间显然是不对了。
所以应该把年、月、日 全都对比一下,然后在确定对应的时间。
所以代码应该如下:
虽然是完成了比较年月日后,来显示对应的日期。但是看看这些代码巨丑无比,而且极不容易理解,所以,我们不应该在html里面写这么多判断代码,so,我们来封装成一个函数,然后在来使用函数对比。
在封装函数之前,我们先确定一下,上面这些判断代码中,有哪些相同的地方,哪些不同的地方。
相同的是
使用new Date(time) 来对比new Date()
使用getDate() / getMonth() / getYear()
使用两个&&来对比
不同的是
一个new Date()里面需要参数time,一个不要参数
有些需要-对应的数字
大概梳理了一下出以上部分,把相同的写进函数内,不同的使用形参,也就是arguments。
// common.js
上面就是封装好的函数,但是有一个问题,就是函数里面写死了比较年月日,因为目前都需要比较三个,就先这样,有时间在改为根据参数在来区分比较年或月或日。
然后就可以使用了,使用的时候需要注意一下,我的这篇博客里面已经说了,这里就不细说, 直接放代码:
这样是不是简洁了很多呢?,而且也容易理解,看着也清晰。
vue中怎么根据时间戳判断对应的时间的详细内容,希望对您有所帮助,信息来源于网络。