vue时间格式化实例代码


Posted in Javascript onJune 13, 2017

整理文档,搜刮出一个vue时间格式化实例代码,稍微整理精简一下做下分享。

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);
}

把上面代码保存为date.js放到你的公共js文件夹中。

在你的需要格式化时间戳的组件里像下面这样使用:

<template>
  <!-- 过滤器 -->
  <div>{{time | formatDate}}</div>
  <!-- 输出结果 -->
  <!-- <div>2016-07-23 21:52</div> -->
</template>
<script>
import {formatDate} from './common/date.js';
export default {
  data() {
    return {
      time:1469281964000
    }
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, yyyy-MM-dd hh:mm);
    }
  }
}
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS array 数组详解
Mar 22 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 Javascript
详解vue slot插槽的使用方法
Jun 13 #Javascript
详解Vue.js分发之作用域槽
Jun 13 #Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 #Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 #Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 #Javascript
微信小程序动态显示项目倒计时效果
Jun 13 #Javascript
深究AngularJS之ui-router详解
Jun 13 #Javascript
You might like
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
php多线程并发实现方法
2016/09/30 PHP
js获取客户端外网ip的简单实例
2013/11/21 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
Python数据类型详解(四)字典:dict
2016/05/12 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
Python读写文件基础知识点
2019/06/10 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
2014年元旦促销活动方案
2014/02/22 职场文书
《春晓》教学反思
2014/04/20 职场文书
真诚的求职信
2014/07/04 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
建议书格式
2015/02/04 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
机关工会工作总结2015
2015/05/26 职场文书
答谢酒会主持词
2015/07/02 职场文书
计算机实训心得体会
2016/01/14 职场文书
导游词之镇江焦山
2019/11/21 职场文书
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript