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

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

// 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)
 }
 }
}

<template>
 <div>
 <span>{{ time | formateDate('MM-dd') }}</span>
 </div>
</template>

<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>

 <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>

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>