1. export function formatTime(date, fmt) {
  2. if (/(y+)/.test(fmt)) {
  3. fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substring(4 - RegExp.$1.length));
  4. }
  5. let o = {
  6. 'M+': date.getMonth() + 1,
  7. 'd+': date.getDate(),
  8. 'h+': date.getHours(),
  9. 'm+': date.getMinutes(),
  10. 's+': date.getSeconds()
  11. };
  12. for (let k in o) {
  13. if (new RegExp(`(${k})`).test(fmt)) {
  14. let str = o[k] + '';
  15. fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
  16. }
  17. }
  18. return fmt;
  19. };
  20. function padLeftZero(str) {
  21. return ('00' + str).substring(str.length);
  22. }
  23.  
  24. export { formatTime }

把上面代码保存为date.js放到你的公共js文件夹中。

在你的需要格式化时间戳的组件里像下面这样使用:

  1. <template>
  2. <!-- 过滤器 -->
  3. <div>{{time | formatTime('yyyy-MM-dd hh:mm:ss')}}</div>
  4. <!-- 输出结果 -->
  5. <!-- <div>2016-07-23 21:52</div> -->
  6. </template>
  7. <script>
  8. import {formatTime} from './common/date.js';
  9. export default {
  10. data() {
  11. return {
  12. time: new Date(1469281964000)
  13. }
  14. }
  15. }
  16. </script>

vue时间格式化的更多相关文章

  1. VUE过滤器的使用 vue 时间格式化

    过滤器介绍 官方教程地址:https://cn.vuejs.org/v2/guide/filters.html 过滤器常被用于一些文本格式化 我们可以自定义过滤器,可以实现各种各样的功能. vue时间 ...

  2. vue 时间格式化

    export function formatDate(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.g ...

  3. vue filter方法-时间格式化

    plugins/filter.js import Vue from 'vue' // 时间格式化 // 用法:<div>{{data | dataFormat('yyyy-MM-dd hh ...

  4. elementUI 时间格式化(一般方法)

    1.html: ... <el-table-column prop="updateTime" label="更新时间" width="160&q ...

  5. vue货币格式化组件、局部过滤功能以及全局过滤功能

    一.在这里介绍一个vue的时间格式化插件: moment 使用方法: .npm install moment --save. 2 定义时间格式化全局过滤器 在main.js中 导入组件 import ...

  6. vue 时间过滤器

    过滤器:定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理).语法:1.注册过滤器: Vue.filter(name ,callback)或new Vue{filters:{}}2. ...

  7. strftime 日期时间格式化

    strftime() 函数根据区域设置格式化本地时间/日期,函数的功能将时间格式化,或者说格式化一个时间字符串. size_t strftime(char *strDest,size_t maxsiz ...

  8. javascript 时间格式化

    添加扩展 //时间格式化扩展Date.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1 ...

  9. js时间格式化

    const formatDate = timestamp => { const date = new Date(timestamp); const m = date.getMonth() + 1 ...

随机推荐

  1. SwipeBackLayout侧滑返回显示桌面

    SwipeBackLayout是一个很好的类库,它可以让Android实现类似iOS系统的右滑返回效果,但是很多用户在使用官方提供的Demo会发现,可能出现黑屏或者返回只是看到桌面背景而没有看到上一个 ...

  2. [hadoop读书笔记] 第三章 HDFS

    P49 当数据集的大小超过一台计算机存储能力时,就有必要对数据集分区(partition)并将分区存储到若干台独立的计算机上. 管理网络中跨多台计算机存储的系统就叫分布式文件系统  Distribut ...

  3. Sword ACE编译

    1.设置环境变量 #ACE_ROOT是指ACE解压目录 export ACE_ROOT=/home/person/2/ACE_wrappers export LD_LIBRARY_PATH=$ACE_ ...

  4. python 进行后端分页详细代码

    后端分页 两个接口 思路: 1. 先得到最大页和最小页数(1, 20) --> 传递给前端, 这样前端就可以知道有多少个页数 2. 通过传递页数得到当前页对应数据库的最大值和最小值 3. 通过s ...

  5. unity--------prefab嵌套prefab

    最近造了个轮子可以批量替换prefab里的prefab,欢迎大家测试-  https://bitbucket.org/xuanyusong/prefab-replace 最近在做UI部分中遇到了这样的 ...

  6. (转)常见LCD接口

    LCD常用接口原理 点击打开链接 点击打开链接 点击打开链接 点击打开链接 点击打开链接 点击打开链接 点击打开链接 点击打开链接 xubin 平台信息:内核:linux2.6/linux3.0系统: ...

  7. (转)live555学习笔记9-h264 RTP传输详解(1)

    九 h264 RTP传输详解(1) 前几章对Server端的介绍中有个比较重要的问题没有仔细探究:如何打开文件并获得其SDP信息.我们就从这里入手吧. 当RTSPServer收到对某个媒体的DESCR ...

  8. 逻辑卷管理LVM 扩容LV容量实例(一)

    实验环境: 一台Linux 服务器添加两块硬盘,一块硬盘容量30G,另一块硬盘容量50G,采用VMware Workstation虚拟机进行模拟实验. 30G硬盘先分成一个分区,分区大小为25G,再创 ...

  9. Java设计模式之五大创建型模式(附实例和详解)

    一.概况 总体来说设计模式分为三大类: (1)创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. (2)结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥 ...

  10. 调整iRedmail之Roundcube webmail服务不可不知的几件事

    iRedMail集成了roundcube webmail,极大的方便了安装维护工作,但是需求是千遍万化的,总有需要深入调整的地方.下面就是我调整roundcube时遇到的几点问题: 一.修改网页标题p ...