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实现Windows任务管理器的代码
Mar 27 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
javascript时间差插件分享
Jul 18 Javascript
js canvas仿支付宝芝麻信用分仪表盘
Nov 16 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
ES6数组的扩展详解
Apr 25 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 Javascript
微信小程序云开发之新手环境配置
May 16 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图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
html下载本地
2006/06/19 Javascript
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
pandas 根据列的值选取所有行的示例
2018/11/07 Python
Python中collections模块的基本使用教程
2018/12/07 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
Python I/O与进程的详细讲解
2019/03/08 Python
对于Python深浅拷贝的理解
2019/07/29 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
大学生四年生活自我鉴定
2013/11/21 职场文书
实习自我鉴定
2013/12/15 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
《放小鸟》教学反思
2014/04/20 职场文书
拖欠货款起诉状
2015/05/20 职场文书
东京审判观后感
2015/06/01 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
Django实现翻页的示例代码
2021/05/24 Python