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中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
在vue中使用image-webpack-loader实例
Nov 12 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
详解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
重置版战役片段
2020/04/09 魔兽争霸
PHP Pear 安装及使用
2009/03/19 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
python实现决策树分类算法
2017/12/21 Python
python验证身份证信息实例代码
2019/05/06 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
美国旅游网站:Tours4Fun
2017/02/17 全球购物
岗位标兵事迹材料
2014/05/17 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
公司周年庆典标语
2014/10/07 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
Python爬虫基础讲解之请求
2021/05/13 Python
简单谈谈Python面向对象的相关知识
2021/06/28 Python