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)
}
}
}
定义好了过滤器，就可以在页面中使用了
weixin_38729221
- 粉丝: 2
- 资源: 935
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- ARM Cortex-A(armV7)编程手册V4.0.pdf
- ABB机器人保养总结解析.ppt
- 【超详细图解】菜鸡如何理解双向链表的python代码实现
- 常用网络命令的使用 ipconfig ping ARP FTP Netstat Route Tftp Tracert Telnet nslookup
- 基于单片机控制的DC-DC变换电路
- RS-232接口电路的ESD保护.pdf
- linux下用time(NULL)函数和localtime()获取当前时间的方法
- Openstack用户使用手册.docx
- KUKA KR 30 hA,KR 60 hA机器人产品手册.pdf
- Java programming with JNI
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0