项目中遇到后端返回值为秒的值,例如(102135464)秒,需要转化成yyyy-m-d格式,但是在vue3项目中不支持filters过滤器,需要使用到计算属性computed代替.

1.项目目录中,创建一个名为utils文件夹下面的filter.js文件,定义函数formatDate,代码如下

export function formatDate(date, fmt) {
	if (/(y+)/.test(fmt)) {
		fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length))
	}
	let o = {
		y: date.getFullYear(),
		m: date.getMonth() + 1,
		d: date.getDate(),
		h: date.getHours(),
		i: date.getMinutes(),
		s: date.getSeconds(),
		a: date.getDay()
	}
	if(o.m < 10) {
	  o.m = '0' + o.m
	}
    if(o.i < 10) {
	  o.i = o.i + '0'
	}
	if(o.s < 10) {
	   o.s = o.s + '0'
	}
	// s
	for (let k in o) {
		if (new RegExp(`(${k})`).test(fmt)) {
			let str = o[k] + ""
			fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
		}
	}
	return fmt
}

2.引用代码,回到项目中需要使用时间戳的vue3文件中,引入刚才创建的filter.js,才能够使用,代码如下

import { formatDate } from "../utils/filter.js";

3.在vue3文件中创建一个方法名为changeFormdate,配合刚才引入filter.js文件中的formatDate函数方法,代码如下

const changeFormdate = computed(() => {
  return (time) => {
    let date = new Date(time);
    return formatDate(date, "yyyy-m-d");
  };
});

4.直接使用插值语法{{changeFormdate(string)}}方法使用,我这里的videoList.addTime,就是后端返回的值,

 <span>发布时间:{{ changeFormdate(videoList.addTime) }}</span>

大功告成,再看项目的时候已经从例如(102135464)秒,转换成了例如2022.6.27这样的格式了