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 concat数组累加 示例
Sep 03 Javascript
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
jquery $.fn $.fx是什么意思有什么用
Nov 04 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
javascript实现五星评分功能
Nov 10 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
Aug 15 Javascript
vue+iview+less 实现换肤功能
Aug 17 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中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
php获取文章上一页与下一页的方法
2014/12/01 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
理解JS事件循环
2016/01/07 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
python 随机森林算法及其优化详解
2019/07/11 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
校园新闻广播稿
2014/01/10 职场文书
教师师德反思材料
2014/02/15 职场文书
职务聘任书范文
2014/03/29 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
合伙购房协议样本
2014/10/06 职场文书
2015大一新生军训感言
2015/08/01 职场文书