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代码优化 事件委托篇
Nov 01 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
JQuery设置时间段下拉选择实例
Dec 30 Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
分享一个vue实现的记事本功能案例
Apr 11 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
php 面向对象的一个例子
2011/04/12 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
jquery 注意事项与常用语法小结
2010/06/07 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
js重写方法的简单实现
2016/07/10 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
python中单下划线_的常见用法总结
2018/07/10 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
工程部主管岗位职责
2013/11/17 职场文书
高中生物教学反思
2014/02/05 职场文书
小学英语课后反思
2014/04/26 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
殡葬服务心得体会
2014/09/11 职场文书
情况说明书格式及范文
2019/06/24 职场文书
详解Vue router路由
2021/11/20 Vue.js
Python实现科学占卜 让视频自动打码
2022/04/09 Python