vue.js 时间戳转换日期格式

vue.js 时间戳转换日期格式时间戳可以理解为过滤器的一种方式 日期格式的转换在项目中也经常遇到 今天我来总结项目中踩过的坑 以及解决方法 时间戳转换日期格式有三种方法 方式一运行 cmd 执行 npminstallmo 或者 yarnaddmomen 命令 安装 moment 插件在 main js 文件中引入 moment 插件 并定义全局过滤器 3 在后续组件中 如果需要转换时

时间戳可以理解为过滤器的一种方式,日期格式的转换在项目中也经常遇到,今天我来总结项目中踩过的坑,以及解决方法。

时间戳转换日期格式有三种方法:

方式一

  1. 运行 cmd 执行 npm install moment --save 或者 yarn add moment 命令,安装 moment 插件
  2. 在 main.js 文件中引入 moment 插件,并定义全局过滤器
    引入插件3. 在后续组件中,如果需要转换时间戳,那么在直接引用 dateFormat 即可
    引用dateFormat




方式二

  1. 直接在 main.js 文件中定义一个全局过滤器
Vue.filter('dateFormat', function(originVal) {     const dt = new Date(originVal) const y = dt.getFullYear() const m = (dt.getMonth() + 1 + '').padStart(2, '0') const d = (dt.getDate() + '').padStart(2, '0') const hh = (dt.getHours() + '').padStart(2, '0') const mm = (dt.getMinutes() + '').padStart(2, '0') const ss = (dt.getSeconds() + '').padStart(2, '0') //时间格式年月日、时分秒 return `${     y}-${     m}-${     d} ${     hh}:${     mm}:${     ss}` }) 
  1. 后面需要的时候,直接使用 dateFormat 即可
    在这里插入图片描述

方式三

HTML:
时间戳
Js:




timestampToTime (time) { 
    // 时间戳为10位需*1000,时间戳为13位的话不需乘1000 var date = new Date(time * 1000) let y = date.getFullYear() let MM = date.getMonth() + 1 MM = MM < 10 ? ('0' + MM) : MM let d = date.getDate() d = d < 10 ? ('0' + d) : d let h = date.getHours() h = h < 10 ? ('0' + h) : h let m = date.getMinutes() m = m < 10 ? ('0' + m) : m let s = date.getSeconds() s = s < 10 ? ('0' + s) : s return y + '年' + MM + '月' + d + '日' } 
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/178542.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月26日 下午5:03
下一篇 2026年3月26日 下午5:04


相关推荐

  • deviceiocontrol true什么意思_device driver service

    deviceiocontrol true什么意思_device driver service与驱动程序通信的函数,除了ReadFile和WriteFile函数还有DeviceIoControl函数,而且DeviceIoControl函数那是相当的彪悍。因为它可以自定义控制码,你只要在IRP_MJ_DEVICE_CONTROL对应的派遣函数中读取控制码,然后针对控制码,你就可以实现自定义的功能了。 函数原型:BOOLWINAPIDeviceIoControl( __

    2025年9月27日
    4
  • Red5 流媒体 学习(一)

    Red5 流媒体 学习(一)由于公司项目需要 要去研究流媒体服务器

    2026年3月16日
    2
  • ScriptManager局部刷新「建议收藏」

    ScriptManager局部刷新「建议收藏」ScriptManager和UpdatePanel控件联合使用可以实现页面异步局部更新的效果。其中的UpdatePanel就是设置页面中异步局部更新区域,它必须依赖于ScriptManager存在,因为ScriptManger控件提供了客户端脚本生成与管理UpdatePanel的功能。几个重要的属性:ScriptManager控件的EnablePartialRendering属性:true…

    2022年7月13日
    19
  • rabbitmq常见面试题「建议收藏」

    rabbitmq常见面试题「建议收藏」1、使用RabbitMQ有什么好处?1.解耦,系统A在代码中直接调用系统B和系统C的代码,如果将来D系统接入,系统A还需要修改代码,过于麻烦!2.异步,将消息写入消息队列,非必要的业务逻辑以异步的方式运行,加快响应速度3.削峰,并发量大的时候,所有的请求直接怼到数据库,造成数据库连接异常2、RabbitMQ中的broker是指什么?cluster又是指什么?bro…

    2022年6月22日
    28
  • jQuery学习笔记总结

    jQuery学习笔记总结1 绝对定位 abs 与相对定位 relative nbsp nbsp nbsp 区别是相对定位参照自己的位置进行移动 当然需要设置 topleft 这些生效 并且原来的位置保留着偏移后会把其它的层遮罩住 nbsp nbsp nbsp 绝对定位就是的参照位置就不像相对那样是自己了至于是哪个就看它的上级或上上级有没有定位了也就是有没有 position relative 或 position fixed 等吧当要绝对定位的层设好

    2026年3月16日
    2
  • 【博弈论】常见总结「建议收藏」

    【博弈论】常见总结「建议收藏」每次看到博弈论的题目就很脑阔疼平衡状态,又称作奇异局势。当面对这个局势时则会失败。任意非平衡态经过一次操作可以变为平衡态。先手能够在初始为非平衡的游戏中取胜,后手能够在初始为平衡的游戏中取胜。SG函数待补两个博客12来源12一、巴仕博弈(BashGame)1堆题目HDU1846有一堆物品,两个人轮流从这堆物品中取物,规定每次至少取一个,最多取m个。最后取光…

    2022年10月15日
    4

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号