如何不使用过滤器在Vue3中将时间戳转换成可读日期格式？

本文共计548个文字，预计阅读时间需要3分钟。

在Vue2中，转换时间戳时通常会使用过滤器的方式来处理，但到了Vue3之后，Vue官方已经移除了过滤器，因此不能再使用过滤器了。这时，我们可以选择使用方法或者计算属性的方式来处理时间戳转换。以下是一个`Time.ts`文件的示例，展示了如何针对时间戳进行转换：

typescriptimport { ref } from 'vue';

export default function Time() { const time=ref('');

const convertTime=(timestamp: number): string=> { const date=new Date(timestamp); return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`; };

const updateTime=(timestamp: number)=> { time.value=convertTime(timestamp); };

return { time, updateTime, };}

在这个示例中，我们定义了一个`Time`组件，其中包含一个响应式引用`time`和一个`convertTime`方法来转换时间戳。`updateTime`方法则用于更新时间戳，并将转换后的时间赋值给`time`。这样，你就可以在Vue组件中使用这个`Time`组件，并根据需要调用`updateTime`方法来更新显示的时间。

 vue2转换时间戳的时候一般使用过滤器的方式，到vue3之后，vue3移除了过滤器，就不能再用了，官方是推荐使用方法或者计算属性的方式。

下面写了一个Time.ts的文件，可以针对时间戳进行转换：

class Time { // 格式化时间 public formatTime(time: number) { let date = new Date(time * 1000); let year = date.getFullYear(); let month = date.getMonth() + 1; let day = date.getDate(); let hour = date.getHours(); let minute = date.getMinutes(); let second = date.getSeconds(); return year + "-" + month.toString().padStart(2, "0") + "-" + day.toString().padStart(2, "0") + " " + hour.toString().padStart(2, "0") + ":" + minute.toString().padStart(2, "0") + ":" + second.toString().padStart(2, "0"); } } const time = new Time(); export default time;

使用的话，只要在模板调用这个方法，然后传入对应的时间戳就可以了。

{{ time.formatTime(timestamp) }}

显示的效果：

2021-05-17 10:59:59

目前只能转换成如上格式，如果需要更多的格式，可以在formatTime增加第2个参数，表示格式化的时间格式，然后依着转化就行了。

到此这篇关于vue3时间戳转换（不使用过滤器）的文章就介绍到这了,更多相关vue3时间戳转换内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！