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")

以上关于vue3 通过计算属性代替 filter 过滤器实现时间格式化的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。