vue 将后台数据时间戳转换成日期格式

vue 将后台数据时间戳转换成日期格式前言 不同组件多次复用的话 建议在 src 下新建一个 common 文件夹 创建 date js 文件 方便多次复用组件中使用 template div p date formatDate p p date formatDate2 p p date formatDate3 p div template

前言.不同组件多次复用的话,建议在 src 下新建一个 common 文件夹,创建 date.js 文件,方便多次复用
组件中使用:

<template> <div> <p>{ 
   { 
    date | formatDate }}</p> <p>{ 
   { 
    date | formatDate2 }}</p> <p>{ 
   { 
    date | formatDate3 }}</p> </div> </template> <script> import { 
    formatDate } from '@/common/date.js'; // 在组件中引用date.js export default { 
    data() { 
    return { 
    date: 51 }; }, filters: { 
    // 时间格式自定义 只需把字符串里面的改成自己所需的格式 formatDate(time) { 
    let date = new Date(time); return formatDate(date, 'yyyy.MM.dd'); }, formatDate2(time) { 
    let date = new Date(time); return formatDate(date, 'hh:mm:ss'); }, formatDate3(time) { 
    let date = new Date(time); return formatDate(date, 'yyyy年MM月dd日 hh:mm:ss'); } } }; </script> 
export function formatDate(date, fmt) { 
    if (/(y+)/.test(fmt)) { 
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } let o = { 
    'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h+': date.getHours(), 'm+': date.getMinutes(), 's+': date.getSeconds() }; 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; } function padLeftZero(str) { 
    return ('00' + str).substr(str.length); } 
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

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

(0)
上一篇 2026年3月26日 下午4:33
下一篇 2026年3月26日 下午4:33


相关推荐

  • 完全理解icmp协议

    完全理解icmp协议1.ICMP出现的原因在IP通信中,经常有数据包到达不了对方的情况。原因是,在通信途中的某处的一个路由器由于不能处理所有的数据包,就将数据包一个一个丢弃了。或者,虽然到达了对方,但是由于搞错了端口号,服务器软件可能不能接受它。这时,在错误发生的现场,为了联络而飞过来的信鸽就是ICMP报文。在IP网络上,由于数据包被丢弃等原因,为了控制将必要的信息传递给发信方。ICMP协议是为了辅助IP…

    2022年7月12日
    26
  • ubuntu ???????????? no permissions 问题解决

    ubuntu ???????????? no permissions 问题解决

    2021年12月5日
    59
  • Hadoop安装与配置详细教程「建议收藏」

    Hadoop安装与配置详细教程「建议收藏」【确保服务器集群安装和配置已经完成!】前言请根据读者的自身情况,进行相应随机应变。我的三台CentOS7服务器:主机:master(192.168.56.110)从机:slave0(192.168.56.111)从机:slave1(192.168.56.112)每一个节点的安装与配置是相同的,在实际工作中,通常在master节点上完成安装和配置后,然后将安装目录复制到其他节点就可以,…

    2022年5月31日
    52
  • 如何锁定表头和表行同时锁定_jquery表头固定列

    如何锁定表头和表行同时锁定_jquery表头固定列前段时间需要这个功能,但是找了很多都不能完美的实现,不是只能锁定表头,就是浏览器兼容问题什么的,在此就自己做了一个锁定表头和列的js方法,依赖于JQuery。如使用jQuery1.9.x及以上版本,需

    2022年8月5日
    15
  • 常见电平转换电路设计参考

    常见电平转换电路设计参考一 概述 在硬件设计中有时候经常会遇到 主芯片引脚使用的 1 8V 3 3V 5V 等 连接外部接口芯片使用的 3 3V 5V 等 由于电平不匹配就必须进行电平转换 两个设备如果供电电压不一样 比如一个是 3 3V 另一个是 5V 那么在电平不匹配的情况下工作 会造成信号传输出错 如果二者电压相差较大 严重的可能会损坏芯片 二 设计 1 晶体管构成的电平转换方法

    2026年3月26日
    2
  • redisclient怎么用_redis go

    redisclient怎么用_redis gohttps://blog.csdn.net/feinifi/article/details/87857477

    2022年10月12日
    9

发表回复

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

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