vue3 通过计算属性代替 filter 过滤器实现时间格式化

大家都知道,vue3没有了 filter 过滤器,想要实现时间格式化,就需要我们另辟蹊径,所以我尝试了用计算属性代替它去格式化时间,安排。

格式化时间文件代码

// 用于格式化时间
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

如何使用

1. 在页面按需引用:

import formatDate from '../assets/js/FormatDate'

// computed 与setup同级
computed: {
    formatDate() {
      return formatDate;
    },
},

2. 在页面使用

formatDate('2021.3.6', "hh:mm dd/MM/yyyy")

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » vue3 通过计算属性代替 filter 过滤器实现时间格式化

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们