vue中根據(jù)時間戳判斷對應(yīng)的時間(今天昨天前天)

來源：本站原創(chuàng)|時間：2020-01-10|欄目：JavaScript|點(diǎn)擊：次

根據(jù)時間戳來顯示對應(yīng)的時間段

本文是根據(jù)vue縮寫，但是原理都是想通的

根據(jù)一個時間戳，然后來顯示對應(yīng)的時間段。如果為今天，則顯示對應(yīng)的time，如果為昨天，則顯示為昨天，如果為前天，則顯示為前天。剩下的顯示為對應(yīng)的日期

需求定義好了，然后開始實(shí)現(xiàn)：

首先，是把時間戳轉(zhuǎn)換為對應(yīng)的時間格式，js提供了原生的獲取對應(yīng)年、月、日等格式的方法，但是不夠靈活，這里提供了一個網(wǎng)上找的比較靈活獲取固定格式的函數(shù)。

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
}

使用這個函數(shù)，需要提供一個時間戳和一個日期格式。

// `+new Date()` 為獲取當(dāng)前時間戳的簡寫形式 
// `yyyy-MM-dd HH:mm:ss`為想要獲取的日期格式
formatDate(+new Date(), 'yyyy-MM-dd HH:mm:ss') // 2019-12-18 20:29:31

接下來是使用過濾器來對時間戳進(jìn)行過濾。vue提供了過濾器，可以定義全局過濾器和本地過濾器，我們定義一個本地過濾器

// common.js
// 這里使用模塊化，把過濾器函數(shù)定義在外部js文件內(nèi)
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>

使用|（管道符）來對時間戳進(jìn)行過濾，管道符左側(cè)為過濾器的第一個參數(shù)，第二個參數(shù)為過濾的格式。定義好之后就會根據(jù)格式顯示對應(yīng)的時間格式了。

接下來最后一步就是對比今天的日期，來顯示對應(yīng)的時間（昨天，前天）
這里使用vue的if else來判斷應(yīng)該顯示哪種日期格式。

<template>
 <div>
 <span v-if="new Date(time).getDate() === new Date().getDate()">{{ time | formateDate('HH:mm') }}</span> 
 // 這里把時間戳轉(zhuǎn)換為`日`，然后跟當(dāng)前的`日`進(jìn)行比較，如果相等，則說明是今天的時間戳，則顯示`time`
 <span v-else-if="new Date(time).getDate() === (new Date().getDate() - 1)">{{ time | formateDate('HH:mm') }}</span> 
  // 這里把**當(dāng)前**的時間戳 `-1`，說明是昨天。比如說今天是18日，`-1`之后就是17，如果`time`轉(zhuǎn)換后 與 17 相等，說明應(yīng)該顯示為`昨天`。
  <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>
  // 否則顯示為對應(yīng)的日期
 </div> 
</template>

好了，以上是根據(jù)日期去比較來顯示對應(yīng)的時間?！?但是，你以為完了嗎？

有一個重要的問題就是，每個月都有30日中的其中一日，今天是12月18日，比較18相等，顯示對應(yīng)的時間，但是如果為11月18日呢？如果還顯示對應(yīng)的時間顯然是不對了。

所以應(yīng)該把年、月、日全都對比一下，然后在確定對應(yīng)的時間。

所以代碼應(yīng)該如下：

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

雖然是完成了比較年月日后，來顯示對應(yīng)的日期。但是看看這些代碼巨丑無比，而且極不容易理解，所以，我們不應(yīng)該在html里面寫這么多判斷代碼，so，我們來封裝成一個函數(shù)，然后在來使用函數(shù)對比。

在封裝函數(shù)之前，我們先確定一下，上面這些判斷代碼中，有哪些相同的地方，哪些不同的地方。

相同的是

使用new Date(time) 來對比new Date()
使用getDate() / getMonth() / getYear()
使用兩個&&來對比

不同的是

一個new Date()里面需要參數(shù)time，一個不要參數(shù)

有些需要-對應(yīng)的數(shù)字

大概梳理了一下出以上部分，把相同的寫進(jìn)函數(shù)內(nèi)，不同的使用形參，也就是arguments。

// common.js

const compareDate = (timestamp, day = 0) => {
 // timestamp 為要傳入的時間戳
 // day 為要減去的日子 因?yàn)楸容^*當(dāng)天*的話，是不需要減的，所以默認(rèn)定義成0,
 
 // 根據(jù)上面分析，有些需要參數(shù)`time`，有些不需要，所以使用一個函數(shù)來區(qū)分一下 
 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
}

上面就是封裝好的函數(shù)，但是有一個問題，就是函數(shù)里面寫死了比較年月日，因?yàn)槟壳岸夹枰容^三個，就先這樣，有時間在改為根據(jù)參數(shù)在來區(qū)分比較年或月或日。

然后就可以使用了，使用的時候需要注意一下，我的這篇博客里面已經(jīng)說了，這里就不細(xì)說，直接放代碼：

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

這樣是不是簡潔了很多呢？，而且也容易理解，看著也清晰。

以上就是根據(jù)時間戳，來比較當(dāng)前時間顯示對應(yīng)的日期。如果有更好的方法歡迎討論。如果有疑問也可以留言。

總結(jié)

以上所述是小編給大家介紹的vue中根據(jù)時間戳判斷對應(yīng)的時間(今天昨天前天)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對我們網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

上一篇：Vue+Node實(shí)現(xiàn)的商城用戶管理功能示例

欄目：JavaScript

下一篇：微信小程序按順序同步執(zhí)行的兩種方式

本文標(biāo)題：vue中根據(jù)時間戳判斷對應(yīng)的時間(今天昨天前天)

本文地址：http://mengdiqiu.com.cn/a1/JavaScript/9441.html

更多JavaScript