admin管理员组文章数量:1538160
项目中遇到后端返回值为秒的值,例如(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这样的格式了
版权声明:本文标题:vue3时间戳格式转换 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1726967537a1092387.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论