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之自动完成组件的深入解析
Jun 19 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 Javascript
dul无法加载bootstrap实现unload table/user恢复
Sep 29 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
antd form表单数据回显操作
Nov 02 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自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
php 带逗号千位符数字的处理方法
2012/01/10 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
js使用递归解析xml
2014/12/12 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
浅析Python多线程下的变量问题
2015/04/28 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
Windows下python3.7安装教程
2018/07/31 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
简单租房协议书
2014/04/09 职场文书
一年级学生评语大全
2014/04/21 职场文书
农业项目投资意向书
2015/05/09 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python