时间戳神器！秒懂今儿明儿！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
}

首先，你需要把时间戳换成我们常用的日期和时间格式。虽然JS也能获取年份、月份之类的信息，不过总觉得有点麻烦。好，别担心，我这里有一个超级好用的函数来搞定这个问题！

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

学会用哪种滤镜后就能用！直接把时间戳丢进去，在第一个设定和要筛选的模式间用“|”分隔就好了～

 

 {{ time | formateDate('MM-dd') }}
 

最后，就是看看今天都发生了什么事儿，再决定要更新哪些东西。那咱们就在 Vue 里用 if-else 来处理这个事情。

每月都有30号，别只看表面数字弄错了哈。还要看年头月份才行，这样才能搞清楚具体时间。

 

 {{ time | formateDate('HH:mm') }} 
 // 这里把时间戳转换为`日`，然后跟当前的`日`进行比较，如果相等，则说明是今天的时间戳，则显示`time`
 {{ time | formateDate('HH:mm') }} 
  // 这里把**当前**的时间戳 `-1`，说明是昨天。比如说今天是18日，`-1`之后就是17，如果`time`转换后 与 17 相等，说明应该显示为`昨天`。
  {{ time | formateDate('HH:mm') }} 
  // `-2`为`前天`
  {{ time | formateDate('MM-dd') }
  // 否则显示为对应的日期
 
 

这方法挺好用的，就是那排出去的代码看着怪怪的，不太明白。别担心！咱不用管它，直接把这些代码放一个小夹子里，想用的时候随手取出来就行！

说真的，瞅瞅时间戳就能猜出那会儿都咋了，不是挺好？如果你还藏着别的锦囊妙计，还不赶紧拿出来跟咱们分享分享！希望我这番话能给你点启示。别忘了点赞，顺便也告诉你朋友们！

 {{time | FormatDate( 'HH:mm')}}
   
 昨天
 前天
   
 {{ time | formateDate('MM-dd') }