vue中怎么根據時間戳判斷對應的時間

這篇文章給大家分享的是有關vue中怎么根據時間戳判斷對應的時間的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

根據時間戳 來顯示對應的時間段

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

根據一個時間戳，然后來顯示對應的時間段。如果為今天，則顯示對應的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 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>

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

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

相同的是

• 使用new Date(time) 來對比new Date()

• 使用getDate() / getMonth() / getYear()

• 使用兩個&&來對比
  

不同的是

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

有些需要-對應的數字

大概梳理了一下出以上部分，把相同的寫進函數內，不同的使用形參，也就是arguments。

// common.js

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>

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

感謝各位的閱讀！關于“vue中怎么根據時間戳判斷對應的時間”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！