export function formatTime(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substring(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).substring(str.length);
} export { formatTime }

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

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

<template>
<!-- 过滤器 -->
<div>{{time | formatTime('yyyy-MM-dd hh:mm:ss')}}</div>
<!-- 输出结果 -->
<!-- <div>2016-07-23 21:52</div> -->
</template>
<script>
import {formatTime} from './common/date.js';
export default {
data() {
return {
time: new Date(1469281964000)
}
}
}
</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. 在CentOS 6.4中支持exfat格式的U盘

    CentOS系列一直没有默认支持使用exfat格式的大容量U盘. 可以通过添加fuse-exfat模块来支持.根据网上资料,整理如下: 1.下载fuse-exfat支持软件: exfat支持是通过fu ...

  2. WebRTC源码分析(一):安卓相机采集实现分析

    WebRTC 的代码量不小,一次性看明白不太现实,在本系列中,我将试图搞清楚三个问题: 客户端之间如何建立连接? 客户端之间如何实现数据传输? 音视频数据的采集.预览.编码.传输.解码.渲染完整流程. ...

  3. jquery easyui toolbar 分割线问题

    http://bbs.csdn.net/topics/390507228 —————————————————————————————————— 将“<div class="datagr ...

  4. maven工程如何引用css和js文件

    工程目录结构如下图: 目的: 在index.jsp中引用hello.js和base.css文件 实现: 在web.xml中,新增<servlet-mapping>     <serv ...

  5. 引入css少引入了rel="stylesheet" 这行代码。导致整个页面空白、

    忘记引入rel="stylesheet" 如下: <link  href="css/swiper-3.3.1.min.css" /> 这样使得整个页 ...

  6. R语言提取包含某字符串的行变量

    已解决,用grep函数 A=read.table("clipboard",sep="/t",header=T) A[grep(pattern="/re ...

  7. javascript完美实现图片拖动改变顺序

    在web页面中,需要改变多个元素的位置,可以通过元素拖动来实现.HTML5中加入了一个全局属性draggable,通过设置true/false来控制元素是否可拖动. 下面以图片拖动为例,用jQuery ...

  8. USB学习笔记连载(十三):keil的配置环境

    在对USB设备的驱动名字进行更改时,需要利用keil软件对固件进行修改,并生成 .iic 文件烧录到CY7C68013A所带的外部EEPROM中,keil生成的 .hex文件只能烧录到 Cypress ...

  9. e609. Listening to All Focus Changes Between Components in an Application

    To listen to focus change events between components, install a listener with the keyboard focus mana ...

  10. (原)多线程sdl_ttf显示文字

    最近在使用sdl做视频显示,因为需要显示文字,所以就找了sdl的拓展库,sdl_ttf来做文字显示. 这里说明一下:sdl_ttf不支持多线程,官方上面有说明,它不是多线程安全的. 所以当我最初使用s ...