vue.js将时间戳转化为日期格式的实现代码


Posted in Javascript onJune 05, 2018

看看下面的代码吧,具体代码如下所示:

<!-- value 格式为13位unix时间戳 -->
<!-- 10位unix时间戳可通过value*1000转换为13位格式 -->
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);
};

 把上面代码保存为date.js放到你的公共js文件夹中。

在你的需要格式化时间戳的组件里像下面这样使用:

<template>
  <!-- 过滤器 time 可以使后台得到的数据,循环出来的也行 -->
  <div>{{time | formatDate}}</div>
  <!-- 输出结果 -->
  <!-- <div>2016-07-23 21:52</div> -->
</template>
<script>
import {formatDate} from './common/date.js';
export default {
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm');
    }
  }
}
</script>

总结

以上所述是小编给大家介绍的vue.js将时间戳转化为日期格式的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
文本加密解密
Jun 23 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
JavaScript编程的单例设计模讲解
Nov 10 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 Javascript
vscode 调试 node.js的方法步骤
Sep 15 Javascript
如何使node也支持从url加载一个module详解
Jun 05 #Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 #Javascript
JS非行间样式获取函数的实例代码
Jun 05 #Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 #Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 #Javascript
Vue项目中跨域问题解决方案
Jun 05 #Javascript
Vue多系统切换实现方案
Jun 05 #Javascript
You might like
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
php对数组排序代码分享
2014/02/24 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
JS前端笔试题分析
2016/12/19 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
收集的几个Python小技巧分享
2014/11/22 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
Python处理文本换行符实例代码
2018/02/03 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
python生成requirements.txt的两种方法
2019/09/18 Python
python下对hsv颜色空间进行量化操作
2020/06/04 Python
python中pickle模块浅析
2020/12/29 Python
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
分厂厂长岗位职责
2013/12/29 职场文书
校园公益广告语
2014/03/13 职场文书
财务情况说明书范文
2014/05/06 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书