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 表格工具集
Apr 25 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
jQuery取id有.的值的方法
May 21 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
微信小程序之事件交互操作实例分析
Dec 03 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 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 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
yii2实现 &quot;上一篇,下一篇&quot; 功能的代码实例
2017/02/04 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
vue 请求后台数据的实例代码
2017/06/22 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
vue小白入门教程
2018/04/02 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
python文件转为exe文件的方法及用法详解
2019/07/08 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
大学生毕业自我评价范文分享
2013/11/11 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers