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 相关文章推荐
html a标签-超链接中confirm方法使用介绍
Jan 04 Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
理解JavaScript事件对象
Jan 25 Javascript
浅析vue component 组件使用
Mar 06 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 Javascript
浅析Vue 防抖与节流的使用
Nov 14 Javascript
js的Object.assign用法示例分析
Mar 05 Javascript
vue实现整屏滚动切换
Jun 29 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
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
JavaScript 字符串连接性能优化
2008/12/20 Javascript
突发奇想的一个jquery插件
2010/11/19 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
Python pass 语句使用示例
2014/03/11 Python
详解python中asyncio模块
2018/03/03 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
人事助理岗位职责
2013/11/18 职场文书
省级四好少年事迹材料
2014/01/25 职场文书
运动会入场解说词
2014/02/07 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis