這篇文章給大家分享的是有關(guān)vue中怎么根據(jù)時(shí)間戳判斷對(duì)應(yīng)的時(shí)間的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、桓臺(tái)網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5開發(fā)、購物商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為桓臺(tái)等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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

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

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

需求定義好了，然后開始實(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)寫形式 
// `yyyy-MM-dd HH:mm:ss`為想要獲取的日期格式
formatDate(+new Date(), 'yyyy-MM-dd HH:mm:ss') // 2019-12-18 20:29:31

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

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

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

接下來最后一步就是對(duì)比今天的日期，來顯示對(duì)應(yīng)的時(shí)間（昨天，前天）
這里使用vue的if else來判斷應(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)行比較，如果相等，則說明是今天的時(shí)間戳，則顯示`time`
 <span v-else-if="new Date(time).getDate() === (new Date().getDate() - 1)">{{ time | formateDate('HH:mm') }}</span> 
  // 這里把**當(dāng)前**的時(shí)間戳 `-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>
  // 否則顯示為對(duì)應(yīng)的日期
 </div> 
</template>

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

有一個(gè)重要的問題就是，每個(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>

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

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

相同的是

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

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

• 使用兩個(gè)&&來對(duì)比

不同的是

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

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

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

// common.js

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

然后就可以使用了，使用的時(shí)候需要注意一下，我的這篇博客里面已經(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>

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

感謝各位的閱讀！關(guān)于“vue中怎么根據(jù)時(shí)間戳判斷對(duì)應(yīng)的時(shí)間”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

文章題目：vue中怎么根據(jù)時(shí)間戳判斷對(duì)應(yīng)的時(shí)間-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://jinyejixie.com/article46/ccsoeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、面包屑導(dǎo)航、移動(dòng)網(wǎng)站建設(shè)、商城網(wǎng)站、關(guān)鍵詞優(yōu)化、網(wǎng)站營(yíng)銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)