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 21 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
Javascript中的arguments对象
Jun 20 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
js module大战
Apr 19 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
vue实现移动端省市区选择
Sep 27 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
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
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
Javascript var变量隐式声明方法
2009/10/19 Javascript
js对象的构造和继承实现代码
2010/12/05 Javascript
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
python安装以及IDE的配置教程
2015/04/29 Python
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
python实现反转部分单向链表
2018/09/27 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
精伦电子Java笔试题
2013/01/16 面试题
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
生产部厂长职位说明书
2014/03/03 职场文书
寄语是什么意思
2014/04/10 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
大学生团支书竞选稿
2015/11/21 职场文书