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 相关文章推荐
自动更新作用
Oct 08 Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
jQuery渐变发光导航菜单的实例代码
Mar 27 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
浅谈js中的in-for循环
Jun 28 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 Javascript
electron踩坑之remote of undefined的解决
Oct 06 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实现股票趋势图和柱形图
2015/02/07 PHP
php检测url是否存在的方法
2015/04/14 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
Python os库常用操作代码汇总
2020/11/03 Python
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
餐饮业的创业计划书范文
2013/12/26 职场文书
入职担保书怎么写
2014/05/12 职场文书
小学教师求职信范文
2015/03/20 职场文书
航班延误投诉信
2015/07/02 职场文书
PHP命令行与定时任务
2021/04/01 PHP
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
python通配符之glob模块的使用详解
2021/04/24 Python