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 相关文章推荐
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
利用node.js如何创建子进程详解
Dec 09 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 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/11/24 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
python调用摄像头拍摄数据集
2019/06/01 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
Django框架 querySet功能解析
2019/09/04 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
数控技术学生的自我评价
2014/02/15 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers