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 相关文章推荐
javascript字符串拼接的效率问题
Dec 25 Javascript
append和appendTo的区别以及appendChild用法
Dec 24 Javascript
JS保留两位小数,多位小数的示例代码
Jan 07 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 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
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
php输入流php://input使用浅析
2014/09/02 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
用jscript实现新建word文档
2007/06/15 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
实例浅析js的this
2016/12/11 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
详解Python验证码识别
2016/01/25 Python
Python入门之后再看点什么好?
2018/03/05 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
python sort、sort_index方法代码实例
2019/03/28 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
AJax面试题
2014/11/25 面试题
工作中个人的自我评价
2013/12/31 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
年终工作总结范文
2019/06/20 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python