vue中根据时间戳判断对应的时间(今天 昨天 前天)

根据时间戳 来显示对应的时间段

本文是根据vue缩写，但是原理都是想通的

根据一个时间戳，然后来显示对应的时间段。如果为今天，则显示对应的time，如果为昨天，则显示为昨天，如果为前天，则显示为前天。剩下的显示为对应的日期

需求定义好了，然后开始实现：

首先，是把时间戳转换为对应的时间格式，js提供了原生的获取对应年、月、日等格式的方法，但是不够灵活，这里提供了一个网上找的比较灵活获取固定格式的函数。

const formatdate = (date, fmt) => {
 date = new date(date);
 if (typeof (fmt) === "undefined") {
  fmt = "yyyy-mm-dd hh:mm:ss";
 }
 if (/(y+)/.test(fmt)) {
  fmt = fmt.replace(regexp.$1, (date.getfullyear() + '').substr(4 - regexp.$1.length))
 }
 let o = {
  'y': date.getfullyear(),
  'm+': date.getmonth() + 1,
  'd+': date.getdate(),
  'h+': date.gethours(),
  'm+': date.getminutes(),
  's+': date.getseconds()
 }
 for (let k in o) {
  if (new regexp(`(${k})`).test(fmt)) {
   let str = o[k] + ''
   fmt = fmt.replace(regexp.$1, regexp.$1.length === 1 ? str : ('00' + str).substr(str.length));
  }
 }
 return fmt
}

使用这个函数，需要提供一个时间戳和一个日期格式。

// `+new date()` 为获取当前时间戳的简写形式 
// `yyyy-mm-dd hh:mm:ss`为想要获取的日期格式
formatdate(+new date(), 'yyyy-mm-dd hh:mm:ss') // 2019-12-18 20:29:31

接下来是使用过滤器来对时间戳进行过滤。vue提供了过滤器，可以定义全局过滤器和本地过滤器，我们定义一个本地过滤器

// common.js
// 这里使用模块化，把过滤器函数定义在外部js文件内
const formatdate ......

export { formatdate }

// index.vue
import { formatdate } from 'common'

export default {
 data () {
 return {
  time: 1576673222857
 }
 },
 methods: {},
 created() {},
 filters: {
 formatedate(data, fmt) {
  return formatdate(data, fmt)
 }
 }
}

定义好了过滤器，就可以在页面中使用了

// index.vue

<template>
 <div>
 <span>{{ time | formatedate('mm-dd') }}</span>
 </div>
</template>

使用|（管道符）来对时间戳进行过滤，管道符左侧为过滤器的第一个参数，第二个参数为过滤的格式。定义好之后就会根据格式显示对应的时间格式了。

接下来最后一步就是对比今天的日期，来显示对应的时间（昨天，前天）
这里使用vue的if else来判断应该显示哪种日期格式。

<template>
 <div>
 <span v-if="new date(time).getdate() === new date().getdate()">{{ time | formatedate('hh:mm') }}</span> 
 // 这里把时间戳转换为`日`，然后跟当前的`日`进行比较，如果相等，则说明是今天的时间戳，则显示`time`
 <span v-else-if="new date(time).getdate() === (new date().getdate() - 1)">{{ time | formatedate('hh:mm') }}</span> 
  // 这里把**当前**的时间戳 `-1`，说明是昨天。比如说今天是18日，`-1`之后就是17，如果`time`转换后 与 17 相等，说明应该显示为`昨天`。
  <span v-else-if="new date(time).getdate() === (new date().getdate() - 2)">{{ time | formatedate('hh:mm') }}</span> 
  // `-2`为`前天`
  <span v-else>{{ time | formatedate('mm-dd') }</span>
  // 否则显示为对应的日期
 </div> 
</template>

好了，以上是根据日期去比较来显示对应的时间。—— 但是，你以为完了吗？

有一个重要的问题就是，每个月都有30日中的其中一日，今天是12月18日，比较18相等，显示对应的时间，但是如果为11月18日呢？如果还显示对应的时间显然是不对了。

所以应该把年、月、日 全都对比一下，然后在确定对应的时间。

所以代码应该如下：

 <span class="lastdate"
  v-if="(new date(time).getdate() == new date().getdate()) && (new date(item.lasttime).getmonth() == new date().getmonth()) && (new date(item.lasttime).getyear() == new date().getyear())"
   >{{time | formatdate( 'hh:mm')}}</span>
   
 <span class="lastdate"
  v-if="(new date(time).getdate() == new date().getdate() - 1) && (new date(item.lasttime).getmonth() == new date().getmonth()) && (new date(item.lasttime).getyear() == new date().getyear())"
   >昨天</span>

 <span class="lastdate"
  v-if="(new date(time).getdate() == new date().getdate() - 1) && (new date(item.lasttime).getmonth() == new date().getmonth()) && (new date(item.lasttime).getyear() == new date().getyear())"
   >前天</span>
   
 <span v-else>{{ time | formatedate('mm-dd') }</span>

虽然是完成了比较年月日后，来显示对应的日期。但是看看这些代码巨丑无比，而且极不容易理解，所以，我们不应该在html里面写这么多判断代码，so，我们来封装成一个函数，然后在来使用函数对比。

在封装函数之前，我们先确定一下，上面这些判断代码中，有哪些相同的地方，哪些不同的地方。

相同的是

• 使用new date(time) 来对比new date()
• 使用getdate() / getmonth() / getyear()
• 使用两个&&来对比
  

不同的是

• 一个new date()里面需要参数time，一个不要参数

有些需要-对应的数字

大概梳理了一下出以上部分，把相同的写进函数内，不同的使用形参，也就是arguments。

// common.js

const comparedate = (timestamp, day = 0) => {
 // timestamp 为要传入的时间戳
 // day 为要减去的日子 因为比较*当天*的话，是不需要减的，所以默认定义成0,
 
 // 根据上面分析，有些需要参数`time`，有些不需要，所以使用一个函数来区分一下 
 let newdate = (time = null) => {
 return time === null ? new date() : new date(time)
 }
 
 // 这里返回 比较后的值，比较成功，则返回`true`，失败则返回`false`
 return (newdate(timestamp).getdate() == newdate().getdate() - day) && (newdate(timestamp).getmonth() == newdate().getmonth()) && (newdate(timestamp).getyear() == newdate().getyear()) 
}

export {
 comparedate
}

上面就是封装好的函数，但是有一个问题，就是函数里面写死了比较年月日，因为目前都需要比较三个，就先这样，有时间在改为根据参数在来区分比较年或月或日。

然后就可以使用了，使用的时候需要注意一下，我的这篇博客里面已经说了，这里就不细说， 直接放代码：

// index.vue
import { comparedate } from 'common.js'
data() {
 return {
 compare: comparedate
 }
}
<template>
 <div>
  <span v-if="compare(time)">{{time | formatdate( 'hh:mm')}}</span>
  <span v-else-if="compare(time, 1)">昨天</span>
  <span v-else-if="compare(time, 2)">前天</span>
   <span v-else>{{time | formatdate( 'mm-d')}}</span>
 </div> 
</template>

这样是不是简洁了很多呢？，而且也容易理解，看着也清晰。

以上就是根据时间戳，来比较当前时间显示对应的日期。如果有更好的方法欢迎讨论。如果有疑问也可以留言。

总结

以上所述是小编给大家介绍的vue中根据时间戳判断对应的时间(今天 昨天 前天)，希望对大家有所帮助