vue3 使用计算属性代替 filter 过滤器实现时间格式化操作
由于vue3没有了 filter 过滤器,所以我尝试了用计算属性代替它去格式化时间方法如下:1、在页面按需引用import formatDate from '../assets/js/FormatDate'// computed 与setup同级computed: {formatDate() {return formatDate;},},2、在页面使用formatDate('2021.3.6',
·
由于vue3没有了 filter 过滤器,所以我尝试了用计算属性代替它去格式化时间
方法如下:
1、在页面按需引用
import formatDate from '../assets/js/FormatDate'
// computed 与setup同级
computed: {
formatDate() {
return formatDate;
},
},
2、在页面使用
formatDate('2021.3.6', "hh:mm dd/MM/yyyy")
ps: 以下为完整的格式化时间文件代码
// 用于格式化时间
function formatDate(value, format) {
//value: 需要格式化的数据
//format: 指定格式 yyyy-MM-dd hh:mm:ss
let date = new Date(value);
// 获取年份
let year = date.getFullYear();
if (/(y+)/.test(format)) {
// 获取匹配组的内容
let content = RegExp.$1;
format = format.replace(content, year.toString().slice(4 - content.length));
}
let o = {
// y: date.getFullYear(), // 用这一句也行,但只适用于四位数显示时候用
M: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
m: date.getMinutes(),
s: date.getSeconds()
};
for (let key in o) {
// 构造动态正则
let reg = new RegExp(`(${key}+)`);
if (reg.test(format)) {
// 获取匹配组的内容
let content = RegExp.$1;
let k = o[key] >= 10 ? o[key] : content.length == 2 ? '0' + o[key] : o[key];
format = format.replace(content, k);
}
}
return format;
}
export default formatDate
欢迎大家讨论交流~
扫码加q群
更多推荐
已为社区贡献4条内容
所有评论(0)