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 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
javascript中检测变量的类型的代码
Dec 28 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
JavaScript创建对象的常用方式总结
Aug 10 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 Javascript
vue treeselect获取当前选中项的label实例
Aug 31 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
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
express启用https使用小记
2019/05/21 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
python 求定积分和不定积分示例
2019/11/20 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
彪马英国官网:PUMA英国
2019/02/11 全球购物
设计部经理的岗位职责
2013/11/16 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
办公室岗位职责
2014/02/12 职场文书
人事文员岗位职责
2014/02/16 职场文书
业务员岗位职责范本
2015/04/03 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP