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. DataWindow.Net组件示例(全部开源)

    1概述 1.1功能简介 Sybase公司的PowerBuilder开发工具,在以前VS工具没有成事以前,是相当风光的.微软都要与其合作,学习它Db方面的技术,才成就了SQLServer数据库.PB开发 ...

  2. C++自定义异常类

    代码样例: #include <iostream> using namespace std; class illegalParameterValue { public: illegalPa ...

  3. [转]Android进程间通信

    Android进程间通信 一.Linux系统进程间通信有哪些方式? 1.socket: 2.name pipe命名管道: 3.message queue消息队列: 4.singal信号量: 5.sha ...

  4. Java如何检查线程是否停止?

    在Java编程中,如何检查线程是否停止? 以下示例演示如何通过使用isAlive()方法来检查线程是否已停止. // from W w w .Y I I b AI.c o M package com. ...

  5. 将项目安装到Maven本地资源库

    在Maven中,可以使用“mvn install”打包项目,并自动部署到本地资源库,让其他开发人员使用它. mvn install 注意,当“install”在执行阶段,上述所有阶段 “validat ...

  6. JAVA编程环境JDK与JRE运行环境与API核心ClassMap

    JDK(Java Development Kit)称为Java开发包或Java开发工具,是一个编写Java的Applet小程序和应用程序的程序开发环境.JDK是整个Java的核心1.Java运行环境( ...

  7. Linux下查看某个进程的线程数量(转)

    转自:https://www.cnblogs.com/caosiyang/archive/2012/10/15/2724585.html 有些时候需要确实进程内部当前运行着多少线程,那么以下几个方法值 ...

  8. 学习Unity的步骤

    作者:王选易链接:https://www.zhihu.com/question/23790314/answer/46815232来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  9. EayRadius 于 2013-7-19 进行体验度更新,增加用户体验度

    EasyRadius于2013-7-19进行更新,此次更新并没有更新通讯接口,通讯接口将统一更新,包括对其他路由的支持 下面我将主要更新的地方向大家描述一下 如果你有疑问或者建议,可以致电137799 ...

  10. Blender下各种坐标系

    转载:https://jingyan.baidu.com/article/ed2a5d1f8f018309f7be1779.html 打开blender创建一个立方体.   切换到“自身”坐标系,旋转 ...