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(进程池与协程)

    1.进程池与线程池: 为什么要用“池”:池子使用来限制并发的任务数目,限制我们的计算机在一个自己可承受的范围内去并发地执行任务 池子内什么时候装进程:并发的任务属于计算密集型 池子内什么时候装线程:并 ...

  2. 修改 item2 用户名

    首先在命令行输入 cd .oh-my-zsh/themes 如下图: 然后命令行输入 sudo vi agnoster.zsh-theme 如下图: 最后在编辑主题文件 在 prompt_segmen ...

  3. corethink功能模块探索开发(十六)后台搜索功能

    效果图: 代码很简单,就是添加搜索框,搜索字段,在初始化页面查询的时候添加查询条件. 1.添加搜索框 添加到删除按钮后边. ->setSearch('请输入设备名称/MAC/宿舍号', U('i ...

  4. 关于source insight、添加.s和.S文件,显示全部路径、加入项目后闪屏幕

    1.source insight使用也有一年多时间了,今天出现建工程后添加文件“no files found” 百思不得姐: 后面发现是原工程命名时出现非法字符.重新命名就ok了. 切记切记 2.实用 ...

  5. Centos7管理selinux及使用firewalld管理防火墙

    CentOS 7.0默认使用的是firewall作为防火墙 1.firewalld的基本使用 启动: systemctl start firewalld 查看状态: systemctl status ...

  6. Read Large Files in Python

    I have a large file ( ~4G) to process in Python. I wonder whether it is OK to "read" such ...

  7. Python框架之Tornado(源码之褪去模板外衣的前戏)

    执行字符串表示的函数,并为该函数提供全局变量 本篇的内容从题目中就可以看出来,就是为之后剖析tornado模板做准备,也是由于该知识点使用的巧妙,所有就单独用一篇来介绍了.废话不多说,直接上代码: # ...

  8. Divide by Zero 2017 and Codeforces Round #399 (Div. 1 + Div. 2, combined) A. Oath of the Night's Watch

    地址:http://codeforces.com/problemset/problem/768/A 题目: A. Oath of the Night's Watch time limit per te ...

  9. Codeforces Round #397 by Kaspersky Lab and Barcelona Bootcamp (Div. 1 + Div. 2 combined) C - Table Tennis Game 2

    地址:http://codeforces.com/contest/765/problem/C 题目: C. Table Tennis Game 2 time limit per test 2 seco ...

  10. linux命令详解之(at)

    在Linux下,有两个命令可以用来作为计划任务而执行,at:一次性定时任务计划执行crontab :每天定时任务计划执行 以下仅说一下一次性任务计划执行(at)要使用一次性任务计划,linux必须要有 ...