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 相关文章推荐
Javascript客户端脚本的设计和应用
Aug 21 Javascript
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
Eval and new funciton not the same thing
Dec 27 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
原生js实现each方法实例代码详解
May 27 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 Javascript
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
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
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
Python从MP3文件获取id3的方法
2015/06/15 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
Coccinelle官网:意大利的著名皮具品牌
2019/05/15 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
客服工作职责
2013/12/11 职场文书
自我鉴定三原则
2014/01/13 职场文书
吃空饷专项治理工作实施方案
2014/03/04 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
聘用合同范本
2015/09/21 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers
Python中异常处理用法
2021/11/27 Python
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电
Python数据结构之队列详解
2022/03/21 Python