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()函数的三种语法介绍
Oct 09 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
在vue中,v-for的索引index在html中的使用方法
Mar 06 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
Vue 一键清空表单的实现方法
Feb 07 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 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 随机生成10位字符代码
2009/03/26 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
Python简单定义与使用二叉树示例
2018/05/11 Python
python实现月食效果实例代码
2019/06/18 Python
python写入文件自动换行问题的方法
2019/07/05 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
Python 多进程原理及实现
2020/12/21 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
C++面试题目
2013/06/25 面试题
维德科技C#面试题笔试题
2015/12/09 面试题
大一新生军训时的自我评价分享
2013/12/05 职场文书
医院工作检讨书范文
2014/02/10 职场文书
高中生职业生涯规划书
2014/02/24 职场文书
会计电算化应届生自荐信
2014/02/25 职场文书
《春笋》教学反思
2014/04/15 职场文书
最常使用的求职信
2014/05/25 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
付款承诺函范文
2015/01/21 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
素质拓展训练感想
2015/08/07 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书