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. Git的使用(1)

    一.Git简介 Git 是一个开源的分布式版本控制软件,用以有效.高速的处理从很小到非常大的项目版本管理. Git 最初是由Linus Torvalds设计开发的,用于管理Linux内核开发.Git ...

  2. MySQL按时间查找

    RecentMutations表的结构如图,现在的需求是需要查找到2017年09月08日前10天的变体总数: SQL语句:SELECT SUM(MutantNumber) FROM RecentMut ...

  3. 学习笔记のsendRedirect &forward

    尽管HttpServletResponse.sendRedirect方法和RequestDispatcher.forward方法都可以让浏览器获得另外一个URL所指向的资源,但两者的内部运行机制有着很 ...

  4. 注册tomcat为windows服务(转载)

    第一部分 应用场景 需要服务器上Tomcat不显示启动窗口 需要服务器上Tomcat开机自启动 ... 第二部分 配置过程 一.修改配置文件 1 {Tomcat_HOME}/bin/service.b ...

  5. python代码编辑器PyCharm快捷键补充

    个人觉得特别有用的: 替换:Ctrl+R 删除当前行 CTRY Y: 复制当前行:Ctrl+D ALT F7: 查找哪些地方使用了选中的方法. ALT UP: 移到上一个方法 ALT DOWN: 移到 ...

  6. 玩玩nmap

    ---恢复内容开始--- [root@miyan ~]# nmap -v Starting Nmap 7.12 ( https://nmap.org ) at 2016-04-04 15:34 CST ...

  7. day4-迭代器、生成器yield

    一.迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退,不过这也没什么,因为人们很少在迭代途中往后退.另外,迭代器的一大优 ...

  8. 第一课 GCC入门

    1序言 gcc是一个可移植的编译器,支持多种硬件平台:也不仅仅是一个本地编译器也是一个跨平台编译器:支持多张语言编译时按照模块化设计支持多种语言. gcc编译过程:预处理(预处理器):编译(编译器): ...

  9. EXSITS应该怎么用?

    无论是做项目还是普通使用SQL,我们通常都会使用IN.因为很好理解,也很方便.但是,面对着多层查询嵌套,或者IN关键字里面的结果集数量巨大,查询的效率就会直线下降.这时候,我们应该用好EXSITS. ...

  10. LeetCode:二叉树的前序遍历【144】

    LeetCode:二叉树的前序遍历[144] 题目描述 给定一个二叉树,返回它的 前序 遍历. 示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [1,2,3] 题目分析 如果用递 ...