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字符串替换及字符串分割示例代码
Dec 12 Javascript
js中回调函数的学习笔记
Jul 31 Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
深入理解jQuery之防止冒泡事件
May 24 Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
JS字符串和数组如何实现相互转化
Jul 02 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 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 中文处理函数集合
2008/08/27 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
JS 控制非法字符的输入代码
2009/12/04 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
Python正则表达式的使用范例详解
2014/08/08 Python
python正则表达式match和search用法实例
2015/03/26 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
中间件分为哪几类
2012/03/14 面试题
学术会议邀请函范文
2014/01/22 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
员工年终自我评价
2014/09/14 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
高质量“欢迎词”
2019/04/03 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang