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>

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

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

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

  2. vue时间格式化

    export function formatTime(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. 流畅的python 对象引用 可变性和垃圾回收

    对象引用.可变性和垃圾回收 变量不是盒子 人们经常使用“变量是盒子”这样的比喻,但是这有碍于理解面向对象语言中的引用式变量.Python 变量类似于 Java 中的引用式变量,因此最好把它们理解为附加 ...

  2. 基于UDP的套接字、粘包问题

    一.基于UDP的套接字 UDP服务端 ss = socket() #创建一个服务器的套接字 ss.bind() #绑定服务器套接字 inf_loop: #服务器无限循环 cs = ss.recvfro ...

  3. Tomcat Server

    Tomcat Server的组成部分: 站在框架的顶层的是Server和ServiceServer:servletcontainer Service:Service是这样一个集合:它由一个或者多个Co ...

  4. C#多线程同步案例实操

    好久没有写博客了,为了养成学习的习惯,培养积极年轻的心态,又回到了博客园这个平台继续撸起时隔多年未光顾的空间. 项目需求: 实现一个简单的获取始发目的耗时.距离,将结果输出表格. 方案思路: 通过多线 ...

  5. 简明python教程六----编写一个python脚本

    备份程序: #!/usr/bin/python #Filename:backup_ver1.py import os import time source = ['/home/liuxj/python ...

  6. 10046 trace详解(2)--tkprof

      10046或10053生成的文件格式比较乱,直接查看有一定的困难,ORACLE自带的一个格式化命令工具tkprof可以将生成的.trc文件进行格式化,具体用说如下: 一.直接输入tkprof不带任 ...

  7. Java泛型二:通配符的使用

    原文地址http://blog.csdn.net/lonelyroamer/article/details/7927212 通配符有三种: 1.无限定通配符   形式<?> 2.上边界限定 ...

  8. how can i get the source code path && file names from an ELF file(compired with -g)?

    https://stackoverflow.com/questions/31333337/how-can-i-get-the-source-code-path-file-names-from-an-e ...

  9. XML约束技术

    为了使XML文档规范化,对XML文档的书写进行约束 XML DTD XML文档(test.xml) <?xml version="1.0" encoding="ut ...

  10. poj1694

    /*给出一棵树的描述 第一行输入t,代表案例的个数 第二行一个n代表这棵树有n个节点 接下来n行第一个数是节点的编号,根节点编号为1,然后第二个数是节点的个数,如果为0那就没子节点,否则输入节点的 编 ...