vue3时间戳转换(不使用过滤器)

 更新时间:2021年12月16日 11:33:08   作者:快乐编程  
这篇文章主要介绍了vue3时间戳转换, vue2转换时间戳的时候一般使用过滤器的方式,到vue3之后,vue3移除了过滤器,就不能再用了,官方是推荐使用方法或者计算属性的方式。下面我们来看看详细介绍吧</P><P>

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

相关文章

  • Vue.js实现网格列表布局转换方法

    Vue.js实现网格列表布局转换方法

    下面小编就为大家带来一篇Vue.js实现网格列表布局转换方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • vue自动化表单实例分析

    vue自动化表单实例分析

    本篇文章通过实例给大家分享了vue自动化表单的操作方法以及相关的代码做了描述,有兴趣的朋友可以跟着学习下。
    2018-05-05
  • VUE前后端学习tab写法实例

    VUE前后端学习tab写法实例

    在本篇文章里小编给大家分享了关于VUE前后端学习tab写法实例以及相关知识点,需要的朋友们参考下。
    2019-08-08
  • Vue中XMLHttpRequest的使用方法详解

    Vue中XMLHttpRequest的使用方法详解

    Vue中使用XMLHttpRequest(XHR)可以获取数据的方式与传统的HTML页面相同,本文主要来和大家讲讲它的正确使用方法,希望对大家有所帮助
    2023-05-05
  • Vue项目服务器部署之子目录部署方法

    Vue项目服务器部署之子目录部署方法

    在本文中我们给大家整理了关于Vue项目服务器部署之子目录部署方法和具体步骤,需要的朋友们参考下。
    2019-05-05
  • 某些场景下建议vue query代替pinia原理解析

    某些场景下建议vue query代替pinia原理解析

    这篇文章主要为大家介绍了某些场景下建议vue-query代替pinia原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • VUE如何利用vue-print-nb实现打印功能详解

    VUE如何利用vue-print-nb实现打印功能详解

    这篇文章主要给大家介绍了关于VUE如何利用vue-print-nb实现打印功能的相关资料,文中还给大家介绍了vue-print-nb使用中的常见问题,如空白页,需要的朋友可以参考下
    2022-04-04
  • Vue2源码解析之自定义指令

    Vue2源码解析之自定义指令

    自定义指令,其实就是在vue提供的钩子中写代码,这篇文章将从源码的角度,带大家深入了解一下Vue2种自定义指令的实现与使用,需要的可以参考一下
    2023-05-05
  • Vuex中actions优雅处理接口请求的方法

    Vuex中actions优雅处理接口请求的方法

    在项目开发中,如果使用到了 vuex,通常我会将所有的接口请求单独用一个文件管理,这篇文章主要介绍了Vuex中actions如何优雅处理接口请求,业务逻辑写在 actions 中,本文给大家分享完整流程需要的朋友可以参考下
    2022-11-11
  • 使用vue封装一个自定义样式的滚动条

    使用vue封装一个自定义样式的滚动条

    众所周知,当容器高度固定而内容部分高度超出容器高度时,浏览器会渲染出一个可以滚动并用于显示剩余界面的条 -- 滚动条,它可以简单的样式修改,但是位置是固定的,无法移动,而我们需要改变位置的时候,它就不能满足我们的需求了,这时我们可以自己手写一个
    2023-10-10

最新评论