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 新浪背投广告实现代码
Jul 07 Javascript
jquery 最简单的属性菜单
Oct 08 Javascript
javascript 限制输入脚本大全
Nov 03 Javascript
jquery文字上下滚动的实现方法
Mar 22 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
js实现简单的无缝轮播效果
Sep 05 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
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
js 获取radio按钮值的实例
2013/08/17 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
js断点调试心得分享(必看篇)
2017/12/08 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
[05:24]TI9采访——教练
2019/08/24 DOTA
python中sets模块的用法实例
2014/09/30 Python
Python读写配置文件的方法
2015/06/03 Python
python非递归全排列实现方法
2017/04/10 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
详解python读取image
2019/04/03 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
人事主管的岗位职责
2013/11/16 职场文书
技能竞赛活动方案
2014/02/21 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
幼儿园社区活动总结
2014/07/07 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
客户经理岗位职责
2015/01/31 职场文书
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android
Python 中的Sympy详细使用
2021/08/07 Python
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python