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.jsconst 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.vueimport { 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中 根据时间戳 判断对应的时间(今天 昨天 前天)相关推荐
- vue 日期判断_vue中根据时间戳判断对应的时间(今天 昨天 前天)
根据时间戳 来显示对应的时间段 本文是根据vue缩写,但是原理都是想通的 根据一个时间戳,然后来显示对应的时间段.如果为今天,则显示对应的time,如果为昨天,则显示为昨天,如果为前天,则显示为前天. ...
- 用时间戳判断两个时间是否在同一天和时区转换问题
用时间戳判断两个时间是否在同一天和时区转换问题 //用时间戳判断两个时间是否在同一天和时区转换问题#include "stdafx.h" #include<stdio.h&g ...
- Vue中使用v-if判断某个元素满足多个条件的简约写法-案例
v-if判断active满足0的时候写法是:v-if="active === 0" 那如果active同时要满足0,1,2三个值的时候,如果在v-if里用 || 并列写 如:v-i ...
- php打印出前一天时间戳,使用php 获取时间今天明天昨天时间戳的详解
使用php 获取时间今天明天昨天时间戳的详解 更新时间:2013年06月20日 11:13:28 作者: 本篇文章是对用php获取时间今天明天昨天时间戳的实现方法进行了详细的分析介绍,需要的朋友参 ...
- vue中的if判断和for循环语句
if语句 <div class="vm"><div v-if="type==='A'">A</div><div v-e ...
- VUE中V-IF条件判断改变元素的样式
方法一 v-if判断后用标签改变样式(特定显示列字体加粗) <v-list dense><template v-for="(col,i) in cols"> ...
- VUE中获取当前的日期 星期 时间
html代码 <span>{{ nowDate }}</span> <span>{{ nowWeek }}</span> <span>{{ ...
- vue 对象判断为空_Vue中可用的判断对象是否为空的方法
vue有两个方法可用 1. JSON.stringify(evtValue)=='{}' 2. Object.keys(xxx).length==0 js判断对象是否为空对象的几种方法 1.将json ...
- 在php中实现时间戳,怎么在PHP中对时间戳进行转化
怎么在PHP中对时间戳进行转化 发布时间:2020-12-23 15:37:23 来源:亿速云 阅读:60 作者:Leah 这期内容当中小编将会给大家带来有关怎么在PHP中对时间戳进行转化,文章内容丰 ...
最新文章
- DoubleViewPager
- go的25个关键字(保留字)和36个预定标识符
- hashmap put复杂度_集合类HashMap,HashTable,ConcurrentHashMap区别?
- Android sendEmptyMessage(0)里面的“0”是啥意思?
- 工作流引擎Activiti详解
- laravel学习笔记
- Spring-全面详解(学习总结)
- 体验更简单的 DM —— v1.0.2
- 入侵检测工具AIDE极简教程
- 超微晶磁芯在开关电源中的应用
- vbscript下载文件(使用https绕过无效的证书错误)
- 域名访问限制不严格漏洞 修复
- 机房收费管理系统之退卡
- 硬核,这 3 款 IDE 插件让你的代码牢不可破
- 数字图像处理之频域滤波
- 小程序errno_错误:UNIX程序中的errno
- 【ubuntu20.04】安装百度输入法和搜狗输入法之后,有登陆界面,登陆之后黑屏,只有鼠标可以移动,点击无效,长时间等待提示“连接失败,请注销后重试”
- 使用jdbc连接orcal数据库(完整教程)
- 计算机在体育教育中的作用,浅谈计算机在体育教学中的应用
- 初学Python需要安装哪些软件?
热门文章
- Ada Lovelace—世界上首位“程序媛”
- 2021牛客暑期多校训练营1 赛后总结
- 对共享单车乱停乱放说不:首个电子围栏技术要求发布
- 计算机组成原理笔记(哈工大刘宏伟)第四章 存储器
- 专访唐九洲:与开发者“在一起,梦飞扬”
- 抖音IP属地能改吗?抖音IP属地错误是什么原因?
- 与不同类型的人交往,如何处理同事关系
- 下面是以十六进制格式存储的一个 UDP 首部:~~~TCP连接使用1000字节的窗口值,而上一次的确认号是22001~~那么下一个报文段的序号是否就是 x + 1 呢?在本题中列出的 8 种情况下,画
- 苹果8参数_苹果Apple MacBook Air 13.3 新款笔记本怎么样,配置好不好
- BAM: Bottleneck Attention Module