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. Andrew Ng机器学习编程作业:Support Vector Machines

    作业: machine-learning-ex6 1. 支持向量机(Support Vector Machines) 在这节,我们将使用支持向量机来处理二维数据.通过实验将会帮助我们获得一个直观感受S ...

  2. hibernate set的3个属性

    inverse 属性 在hibernate中通过对 inverse 属性的来决定是由双向关联的哪一方来维护表和表之间的关系. inverse = false 的为主动方.inverse = true ...

  3. Java中对Clone的理解

    面试中经常遇到Clone的相关知识,今天总算是把Clone理解的比较透彻了!Java中Clone的概念大家应该都很熟悉了,它可以让我们很方便的“制造”出一个对象的副本来,下面来具体看看java中的Cl ...

  4. 005-JSX简介以及使用

    一.概述 考虑这个变量声明: const element = <h1>Hello, world!</h1>; 标签语法既不是字符串也不是HTML. 它被称为JSX,它是Java ...

  5. c++ ScopeExitGuard

    说到Native Languages就不得不说资源管理,因为资源管理向来都是Native Languages的一个大问题,其中内存管理又是资源当中的一个大问题,由于堆内存需要手动分配和释放,所以必须确 ...

  6. is和==

    ==判断两个对象值是否相等 is表示两个变量是否指向一块对象

  7. Canvas:橡皮筋线条绘制

    Canvas:橡皮筋线条绘制 效果演示 实现要点 事件监听 [说明]: 在Canvas中检测鼠标事件是非常简单的,可以在canvas中添加一个事件监听器,当事件发生时,浏览器就会调用这个监听器. 我们 ...

  8. fetch 添加请求头headers

    // var headers = new Headers(); // headers.append('Authorization', localStorage.getItem('token')); f ...

  9. DATEDIFF() 返回2个日期之间的间隔

    SELECT DATEDIFF(day,'2008-12-29','2008-12-30') AS DiffDate 解释: 第一个参数 day 表示 返回2个日期间隔的 个间隔类型 是 日期:结果 ...

  10. Spring 之高级装配

    [环境与Profile] 暂略 [条件化的bean] 暂略 [处理自动装配歧义性] 暂略 [ bean 的作用域] 在 @Componen . @Bean 下以及 XML 中的声明方式如下所示, @C ...