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 相关文章推荐
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
Sep 14 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
实用Javascript调试技巧分享(小结)
Jun 18 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 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
抓取YAHOO股票报价的类
2009/05/15 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
python 切片和range()用法说明
2013/03/24 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
python3.5的包存放的具体路径
2020/08/16 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
介绍一下Linux文件的记录形式
2013/09/29 面试题
大二学生学习个人自我评价
2014/01/19 职场文书
教师学期个人总结
2015/02/11 职场文书
2015年暑期见闻
2015/07/14 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书