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 ajax return没有返回值的解决方法
Oct 20 Javascript
jQuery入门之层次选择器实例简析
Dec 11 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 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 curl使用实例
2015/07/02 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
短信提示使用 特效
2007/01/19 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
Python数组条件过滤filter函数使用示例
2014/07/22 Python
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python selenium 三种等待方式解读
2016/09/15 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
python 实现端口扫描工具
2020/12/18 Python
机械专业个人求职自荐信格式
2013/09/21 职场文书
初三家长会邀请函
2014/01/18 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL