如何在不使用vue3过滤器的情况下实现时间戳转换？

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

Vue2中转换时间戳通常使用过滤器的方式，而Vue3之后移除了过滤器，建议使用方法或计算属性进行转换。以下是一个简单的`Time.ts`文件示例，用于转换时间戳：

typescriptimport { defineComponent, computed } from 'vue';

export default defineComponent({ name: 'TimeComponent', props: { timestamp: { type: Number, required: true } }, setup(props) { const formattedTime=computed(()=> { const date=new Date(props.timestamp); return date.toLocaleString(); });

return { formattedTime }; }});

在这个组件中，我们使用`computed`来创建一个响应式的计算属性`formattedTime`，它会根据传入的`timestamp`来格式化时间。这样，你就可以在模板中直接使用`formattedTime`来显示格式化后的时间。

 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时间戳转换内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！