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 相关文章推荐
PNG背景在不同浏览器下的应用
Jun 22 Javascript
jquery png 透明解决方案(推荐)
Aug 21 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
一个简单的js树形菜单
Dec 09 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
javascript+canvas制作九宫格小程序
Dec 28 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
JS实现验证码倒计时的注册页面
Jan 02 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 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脚本数据库功能详解(中)
2006/10/09 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
javascript 写类方式之一
2009/07/05 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
Vue实现简易计算器
2020/02/25 Javascript
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
Python pickle模块用法实例分析
2015/05/27 Python
Python基于PycURL实现POST的方法
2015/07/25 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
django实现日志按日期分割
2020/05/21 Python
keras:model.compile损失函数的用法
2020/07/01 Python
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
方正Java笔试题
2014/07/03 面试题
教师申诉制度
2014/01/29 职场文书
30年同学聚会感言
2014/01/30 职场文书
先进工作者获奖感言
2014/02/08 职场文书
中式婚礼主持词
2014/03/13 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
银行转正自我鉴定
2014/09/29 职场文书
看雷锋电影观后感
2015/06/10 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书