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


Posted in Javascript onJuly 31, 2019

前言

在项目中,经常会有后台返回一个时间戳,页面展示用的却是日期格式的情况
不同组件多次使用的话,那么建议在 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>

效果图

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 学习 几种常用方法
Jun 11 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
javascript开发随笔二 动态加载js和文件
Nov 25 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
深入理解setTimeout函数和setInterval函数
May 20 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
详解用node编写自己的cli工具
May 23 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
openlayers实现地图弹窗
Sep 25 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 #Javascript
原生js代码能实现call和bind吗
Jul 31 #Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 #Javascript
javascript中undefined的本质解析
Jul 31 #Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 #Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 #Javascript
js实现一个简易计算器
Mar 30 #Javascript
You might like
用户的详细注册和判断
2006/10/09 PHP
php权重计算方法代码分享
2014/01/09 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
js 字符串操作函数
2009/07/25 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
python绘制彩虹图
2019/12/16 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
Weblogic和WebSphere不同特点
2012/05/09 面试题
扩大国家免疫规划实施方案
2014/03/21 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书