vue获取时间戳转换为日期格式代码实例


Posted in Javascript onApril 17, 2019

vue获取时间戳转换为日期格式。

方法一为转载黄轶老师的format方法:出处(黄轶老师github    https://github.com/ustbhuangyi);

// 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);
};
<!-- **.vue -->
<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.filter

<!-- demo.vue -->
<template>
 <!-- time为时间戳 -->
 <div>{{time | formatDate}}</div>
 <!-- 结果为 2018-01-23 18:31:35 -->
</template>
<script type="text/ecmascript-6">
 export default {
  data() {
   return {
    time: 1516703495241
   };
  },
  filters: {
   formatDate: function (value) {
    let date = new Date(value);
    let y = date.getFullYear();
    let MM = date.getMonth() + 1;
    MM = MM < 10 ? ('0' + MM) : MM;
    let d = date.getDate();
    d = d < 10 ? ('0' + d) : d;
    let h = date.getHours();
    h = h < 10 ? ('0' + h) : h;
    let m = date.getMinutes();
    m = m < 10 ? ('0' + m) : m;
    let s = date.getSeconds();
    s = s < 10 ? ('0' + s) : s;
    return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
   }
  }
 };
</script>
<style lang="stylus" rel="stylesheet/stylus">
 
</style>

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

Javascript 相关文章推荐
JQuery 学习笔记 选择器之六
Jul 23 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
Javascript中的getUTCHours()方法使用详解
Jun 10 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
JS拖拽组件学习使用
Jan 19 Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 Javascript
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 #Javascript
vue 项目 iOS WKWebView 加载
Apr 17 #Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
Apr 17 #Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 #Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 #Javascript
基于JS实现web端录音与播放功能
Apr 17 #Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 #Javascript
You might like
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
php cli换行示例
2014/04/22 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
用JS实现的一个include函数
2007/07/21 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
python PIL模块与随机生成中文验证码
2016/02/27 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
甜美蛋糕店创业计划书
2014/01/30 职场文书
自动一体化专业求职信
2014/03/15 职场文书
股东授权委托书范本
2014/09/13 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
放牛班的春天观后感
2015/06/01 职场文书
政审证明材料
2015/06/19 职场文书
公司仓库管理制度
2015/08/04 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书