快捷導(dǎo)航

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

更新時(shí)間：2019年12月20日 13:27:21 作者：ShiyuTim

這篇文章主要介紹了vue中根據(jù)時(shí)間戳判斷對(duì)應(yīng)的時(shí)間（今天昨天前天）,需要的朋友可以參考下

根據(jù)時(shí)間戳來(lái)顯示對(duì)應(yīng)的時(shí)間段

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

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

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

首先，是把時(shí)間戳轉(zhuǎn)換為對(duì)應(yīng)的時(shí)間格式，js提供了原生的獲取對(duì)應(yīng)年、月、日等格式的方法，但是不夠靈活，這里提供了一個(gè)網(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
}

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

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

接下來(lái)是使用過(guò)濾器來(lái)對(duì)時(shí)間戳進(jìn)行過(guò)濾。vue提供了過(guò)濾器，可以定義全局過(guò)濾器和本地過(guò)濾器，我們定義一個(gè)本地過(guò)濾器

// common.js
// 這里使用模塊化，把過(guò)濾器函數(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)
 }
 }
}

定義好了過(guò)濾器，就可以在頁(yè)面中使用了

// index.vue

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

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

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

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

好了，以上是根據(jù)日期去比較來(lái)顯示對(duì)應(yīng)的時(shí)間。—— 但是，你以為完了嗎？

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

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

所以代碼應(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>

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

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

相同的是

使用new Date(time) 來(lái)對(duì)比new Date()
使用getDate() / getMonth() / getYear()
使用兩個(gè)&&來(lái)對(duì)比

不同的是

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

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

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

// common.js

const compareDate = (timestamp, day = 0) => {
 // timestamp 為要傳入的時(shí)間戳
 // day 為要減去的日子 因?yàn)楸容^*當(dāng)天*的話(huà)，是不需要減的，所以默認(rèn)定義成0,
 
 // 根據(jù)上面分析，有些需要參數(shù)`time`，有些不需要，所以使用一個(gè)函數(shù)來(lái)區(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ù)，但是有一個(gè)問(wèn)題，就是函數(shù)里面寫(xiě)死了比較年月日，因?yàn)槟壳岸夹枰容^三個(gè)，就先這樣，有時(shí)間在改為根據(jù)參數(shù)在來(lái)區(qū)分比較年或月或日。

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

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

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

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

總結(jié)

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

您可能感興趣的文章: