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 相关文章推荐
比较详细的关于javascript中void(0)的具体含义解释
Aug 02 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
javascript oop开发滑动(slide)菜单控件
Aug 25 Javascript
javascript数组的使用
Mar 28 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
修改vue+webpack run build的路径方法
Sep 01 Javascript
微信小程序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
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
JS方法调用括号的问题探讨
2014/01/24 Javascript
AngularJS内置指令
2015/02/04 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
Python实现全角半角转换的方法
2014/08/18 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
python2.7到3.x迁移指南
2018/02/01 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
基于python3实现倒叙字符串
2020/02/18 Python
python中setuptools的作用是什么
2020/06/19 Python
pycharm永久激活超详细教程
2020/10/29 Python
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
Merchant 1948澳大利亚:新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
一体化教学实施方案
2014/05/10 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
建筑工地质量标语
2014/06/12 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
长江七号观后感
2015/06/11 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android