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 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
javascript去除空格方法小结
May 21 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
js模拟实现百度搜索
Jun 28 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
德生PL330测评
2021/03/02 无线电
PHP Try-catch 语句使用技巧
2016/02/28 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
2017/12/06 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
ES6 如何改变JS内置行为的代理与反射
2019/02/11 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python实现360皮肤按钮控件示例
2014/02/21 Python
python模拟enum枚举类型的方法小结
2015/04/30 Python
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
浅析python中的分片与截断序列
2016/08/09 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
.NET现在共支持多少种语言
2014/02/26 面试题
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
2014年质量工作总结
2014/11/22 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技