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实现图片平面旋转的方法
Mar 01 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 Javascript
JavaScript实现跟随鼠标移动的盒子
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
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
JavaScript插件化开发教程(五)
2015/02/01 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
如何解决hover在ie6中的兼容性问题
2016/12/15 Javascript
js实现密码强度检验
2017/01/15 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
python函数局部变量用法实例分析
2015/08/04 Python
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
Python实现完整的事务操作示例
2017/06/20 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
Python小白垃圾回收机制入门
2020/06/09 Python
摄影实习自我鉴定
2013/09/20 职场文书
财务与信息服务专业推荐信
2013/11/28 职场文书
2014年师德承诺书
2014/05/23 职场文书
法人授权委托书样本
2014/09/19 职场文书
运动会通讯稿200字
2015/07/20 职场文书
诚信考试主题班会
2015/08/17 职场文书
html5表单的required属性使用
2021/07/07 HTML / CSS