vue 日期过滤器

最新推荐文章于 2025-07-11 11:54:59 发布

Moize

最新推荐文章于 2025-07-11 11:54:59 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.csdn.net/Moize/article/details/124268407

这篇博客介绍了在Vue.js中创建全局日期过滤器的方法，用于格式化日期显示。提供了两种不同的实现方式，一种是直接在过滤器中处理日期格式，另一种是通过传入自定义格式参数来实现。示例代码展示了如何将日期转换为'yyyy-MM-dd'格式。

@vue 日期过滤器

/*
全局时间过滤器
使用方法 e.g {{ [item.EntityEndTime,‘yyyy-MM-dd’] | Date}}
*/
Vue.filter(‘Date’, (item) => {
const oDate = new Date(item[0]);
const o = {
‘M+’: oDate.getMonth() + 1, // 月份
‘d+’: oDate.getDate(), // 日
‘h+’: oDate.getHours(), // 小时
‘m+’: oDate.getMinutes(), // 分
‘s+’: oDate.getSeconds(), // 秒
‘q+’: Math.floor((oDate.getMonth() + 3) / 3), // 季度
S: oDate.getMilliseconds(), // 毫秒
};
// eslint-disable-next-line no-restricted-syntax
if (/(y+)/.test(item[1])) { item[1] = item[1].replace(RegExp. $1, (‘$ {oDate.getFullYear()}).substr(4 - RegExp.$1.length)); } for (const k in o) { if (new RegExp((${k})).test(item[1])) item[1] = item[1].replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : ((00 ${o[k]}`).substr((`$ {o[k]}`).length))); }
return item[1];
});

第二种：

使用：/** {{item.dataTime | dateFormat(‘yyyy-MM-dd’)}} */
Vue.filter(‘dateFormat’, function(originVal,fmt) {
const dt = new Date(originVal)

const y = dt.getFullYear()
const m = (dt.getMonth() + 1 + ‘’).padStart(2, ‘0’)
const d = (dt.getDate() + ‘’).padStart(2, ‘0’)

const hh = (dt.getHours() + ‘’).padStart(2, ‘0’)
const mm = (dt.getMinutes() + ‘’).padStart(2, ‘0’)
const ss = (dt.getSeconds() + ‘’).padStart(2, ‘0’)

/*可以自己设置/
if(fmt === ‘yyyy-MM-dd’){
return ${y}-${m}-${d}
}

return ${y}-${m}-${d} ${hh}:${mm}:${ss}
})