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 相关文章推荐
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
Dec 10 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
JS实现简易留言板增删功能
Feb 08 Javascript
javascript canvas封装动态时钟
Sep 30 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 Javascript
Bootstrap FileInput实现图片上传功能
Jan 28 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
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
javascript 解析url的search方法
2010/02/09 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
JS实现页面打印功能
2017/03/16 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
js实现盒子拖拽动画效果
2020/08/09 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
Python urllib3软件包的使用说明
2020/11/18 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
物理分数没达标检讨书
2014/09/13 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书