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 相关文章推荐
繁简字转换功能
Jul 19 Javascript
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
JS实现拖动示例代码
Nov 01 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
Dec 16 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
Jquery实现$.fn.extend和$.extend函数
Apr 14 Javascript
JS判断数组那点事
Oct 10 Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 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去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
对象的类型:本地对象(1)
2006/12/29 Javascript
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
js中作用域的实例解析
2017/03/16 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
在Windows8上的搭建Python和Django环境
2014/07/03 Python
Mac 上切换Python多版本
2017/06/17 Python
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
python实现决策树分类
2018/08/30 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
电气个人求职信范文
2014/02/04 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
打架检讨书
2015/01/27 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
进行数据处理的6个 Python 代码块分享
2022/04/06 Python