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 相关文章推荐
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
原生js实现移动端瀑布流式代码示例
Dec 18 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
微信小程序的开发范式BeautyWe.js入门详解
Jul 10 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 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
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
php 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
PHP开发微信支付的代码分享
2014/05/25 PHP
神盾加密解密教程(一)PHP变量可用字符
2014/05/28 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
python连接mysql并提交mysql事务示例
2014/03/05 Python
基于python编写的微博应用
2014/10/17 Python
连接Python程序与MySQL的教程
2015/04/29 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
班主任对学生的评语
2014/04/26 职场文书
企业宣传策划方案
2014/05/29 职场文书
债务纠纷起诉书
2015/05/20 职场文书
详解Go与PHP的语法对比
2021/05/29 PHP