vue判断当前时间是否是当月的前十天
发布网友
发布时间：2022-03-27 12:52
共1个回答
热心网友
时间：2022-03-27 14:21
根据一个时间戳，然后来显示对应的时间段。如果为今天，则显示对应的time，如果为昨天，则显示为昨天，如果为前天，则显示为前天。剩下的显示为对应的日期需求定义好了，然后开始实现
首先，是把时间戳转换为对应的时间格式，js提供了原生的获取对应年、月、日等格式的方法，但是不够灵活，这里提供了一个网上找的比较灵活获取固定格式的函数。const formatDate = (date, fmt) => {undefined
date = new Date(date);
if (typeof (fmt) === "undefined") {undefined
fmt = "yyyy-MM-dd HH:mm:ss";}
if (/(y+)/.test(fmt)) {undefined
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))}
let o = {undefined
'Y': date.getFullYear(),
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'H+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()}
for (let k in o) {undefined
if (new RegExp(`(${k})`).test(fmt)) {undefined
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 {undefined
data () {undefined
return {undefine
dtime: 1576673222857
}
},
methods: {},
created() {},
filters: {undefined
formateDate(data, fmt) {undefined
return formatDate(data, fmt)
}
}
}
定义好了过滤器，就可以在页面中使用了
// index.vue
{undefined{ time | formateDate('MM-dd') }}
使用|(管道符)来对时间戳进行过滤，管道符左侧为过滤器的第一个参数，第二个参数为过滤的格式。定义好之后就会根据格式显示对应的时间格式了。
接下来最后一步就是对比今天的日期，来显示对应的时间(昨天，前天)
这里使用vue的if else来判断应该显示哪种日期格式。
{undefined{ time | formateDate('HH:mm') }}
// 这里把时间戳转换为`日`，然后跟当前的`日`进行比较，如果相等，则说明是今天的时间戳，则显示`time`
{undefined{ time | formateDate('HH:mm') }}
// 这里把**当前**的时间戳 `-1`，说明是昨天。比如说今天是18日，`-1`之后就是17，如果`time`转换后 与 17 相等，说明应该显示为`昨天`。
{undefined{ time | formateDate('HH:mm') }}
// `-2`为`前天`
{undefined{ time | formateDate('MM-dd') }
// 否则显示为对应的日期
