根据一个时间戳，然后来显示对应的时间段。如果为今天，则显示对应的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 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 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-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