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

前言

在项目中，经常会有后台返回一个时间戳，页面展示用的却是日期格式的情况
不同组件多次使用的话，那么建议在 src 下新建一个 common 文件夹，创建 date.js 文件，方便多次复用

在组件中使用

<template>
 <div>
  <p>{{date1 | formatDate}}</p>
  <p>{{date1 | formatDate2}}</p>
  <p>{{date1 | formatDate3}}</p>
 </div>
</template>
<script>
 import { formatDate } from '@/common/date.js' // 在组件中引用date.js
 export default {
  data() {
   return {
    date1: 1646461131351
   }
  },
  filters: {
   /*
    时间格式自定义 只需把字符串里面的改成自己所需的格式
   */
   formatDate(time) {
    var date = new Date(time);
    return formatDate(date, 'yyyy.MM.dd');
   },
   formatDate2(time) {
    var date = new Date(time);
    return formatDate(date, 'hh:mm:ss');
   },
   formatDate3(time) {
    var date = new Date(time);
    return formatDate(date, 'yyyy年MM月dd日 hh:mm:ss');
   }
  }
 }
</script>

效果图

date.js源码

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);
};

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue.js将时间戳转化为日期格式的实现代码

    看看下面的代码吧,具体代码如下所示: <!-- value 格式为13位unix时间戳 --> <!-- 10位unix时间戳可通过value*1000转换为13位格式 --> export function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } l

  • Vue filter格式化时间戳时间成标准日期格式的方法

    调用实例:yyyy-MM-dd或者yyyy-MM-dd hh:mm:ss进行格式 <div>{{data | dataFormat('yyyy-MM-dd hh:mm:ss')}}</div> 代码: import Vue from 'vue' Vue.filter('dataFormat', function (value, fmt) { let getDate = new Date(value); let o = { 'M+': getDate.getMonth() + 1,

  • vue获取时间戳转换为日期格式代码实例

    vue获取时间戳转换为日期格式. 方法一为转载黄轶老师的format方法:出处(黄轶老师github    https://github.com/ustbhuangyi): // date.js export function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); }

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

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

    前言 在项目中,经常会有后台返回一个时间戳,页面展示用的却是日期格式的情况 不同组件多次使用的话,那么建议在 src 下新建一个 common 文件夹,创建 date.js 文件,方便多次复用 在组件中使用 <template> <div> <p>{{date1 | formatDate}}</p> <p>{{date1 | formatDate2}}</p> <p>{{date1 | formatDate3}}</

  • vue如何使用moment处理时间戳转换成日期或时间格式

    vue如何使用moment处理时间戳转换成日期或时间格式

    目录 一.使用环境 二.安装moment 三.在vue所需页面进行引入 五.最终效果 六.moment中文官网 总结 一.使用环境 Moment 被设计为在浏览器和 Node.js 中都能工作. 所有的代码都应该在这两种环境中都可以工作,并且所有的单元测试都应该在这两种环境中运行. CI 系统当前使用以下的浏览器:Windows XP 上的 Chrome,Windows 7 上的 IE 8.9 和 10,Windows 10 上的 IE 11,Linux 上最新的 Firefox,OSX 10.

  • C++时间戳转换成日期时间的步骤和示例代码

    因工作需要,经常跟时间戳打交道,但是因为它仅仅是一个数字,我们很难直接看出它有什么意义,或两个时间戳之间究竟差了多长的间隔.于是从MSDN for Visual Studio6上找到了时间戳转换成日期时间的算法.本文除介绍这一算法外,还提供一个示例代码. 1.将时间戳转换成一串32比特的二进制数.有些数字转换之后不够32位,则在前面补充0.这可通过windows自带的计算器完成.比如481522543转换成 0001 1100 1011 0011 0111 0011 0110 1111 2.根据

  • C#实现将字符串转换成日期格式的方法

    本文实例讲述了C#实现将字符串转换成日期格式的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: string s = "20120114161145"; Response.Write(DateTime.ParseExact(s, "yyyyMMddHHmmss", new System.Globalization.CultureInfo("zh-CN", true)).ToString()); return; 希望本文所述对大

  • Js中将Long转换成日期格式的实现方法

    Js中将Long转换成日期格式的实现方法

    主要用于将数据库中日期用long表示,转换成YYYY-MM-DD格式或YYYY-MM-DD HH:mm:ss格式 若显示为YYYY-MM-DD HH:mm:ss格式,调用如下方法: datetimeFormat(longTypeDate); 若显示为YYYY-MM-DD格式,调用如下方法: dateFormat(longTypeDate); Js中具体方法如下: /* * 时间格式化工具 * 把Long类型的1527672756454日期还原yyyy-MM-dd 00:00:00格式日期 */

  • vue将时间戳转换成自定义时间格式的方法

    1.首先建立一个date.js文件,写入如下代码: 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.g

  • 转换layUI的数据表格中的日期格式方法

    转换layUI的数据表格中的日期格式 前端jsp代码 <table class="layui-table" style="width:100%" lay-data="{url:'/why123/user/findUserAll?userType=0', page:true, id:'idTest'}" lay-filter="demo"> <thead> <tr> <th lay-da

  • JS自定义函数实现时间戳转换成date的方法示例

    本文实例讲述了JS自定义函数实现时间戳转换成date的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>获取当前年/月/日(www.jb51.net)</title> </head> <body> <script> function UnixToDate(unixTime

  • js中的时间转换—毫秒转换成日期时间的示例代码

    js毫秒时间转换成日期时间 复制代码 代码如下: var oldTime = (new Date("2011/11/11 20:10:10")).getTime(); //得到毫秒数 大多数是用毫秒数除以365*24*60*60&1000,这么转回去,这种方法转换太过复杂,年月日,时分秒都要不同的方法获取,而且有的年份有366天,有的365天,这么算起来就太过复杂了. 后面自己试了一个方法,居然成功了 复制代码 代码如下: var oldTime = (new Date(&qu

随机推荐