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. ES06--elasticsearch

    ES06--elasticsearch unassigned错误解决(手动处理)   查看集群健康状态:curl -XGET http://localhost:9200/_cluster/health ...

  2. SpringBoot2 时间类型自动格式化 自动转换

    package com.archibladwitwicke.springboot2.chapter03.configurer; import com.archibladwitwicke.springb ...

  3. js json处理 双引号

    在数据传输流程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象 JSON字符串: var str1 = '{ "name": "cxh", ...

  4. python 基础干货 02

    list 与 tuple list 类似 数组 tuple 跟 list 一样, 只是一旦定义, 里边的内容不可以改变. 这样, 上边的内容就不可以改变了. "可变的" tuple ...

  5. 优雅的运用 Kotlin 的 null safety 特性,而不要简单的直接用 !!双感叹号

    对于 Null 的检查是 Kotlin 的特点之一.强制你在编码过程中考虑变量是否可为 null,因此可以避免很多在 Java 中隐藏的 NullPointerException. 但是,当你用插件直 ...

  6. 第三百六十五节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的基本查询

    第三百六十五节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的基本查询 1.elasticsearch(搜索引擎)的查询 elasticsearch是功能 ...

  7. tpshop商品属性表关系

    TPshop 里面的商品属性, 首先看看TPshop商品详情中的属性介绍, 纯展示给用户看的. 再来tpshop看看商品列表帅选页面的属性,可以根据属性帅选不同的商品 再来看看tpshop后台属性管理 ...

  8. (转)YUV420、YUV422、RGB24转换

    //平面YUV422转平面RGB24static void YUV422p_to_RGB24(unsigned char *yuv422[3], unsigned char *rgb24, int w ...

  9. Linux环境安装MySQL数据库(RPM格式的软件包)

    1.  下载mysql安装包 下载地址1:  http://www.mysql.com/   (mysql官网) 下载地址2:  http://mirrors.sohu.com/mysql/   (其 ...

  10. 浪漫程序员 HTML5爱心表白动画

    我们程序员在追求爱情方面也是非常浪漫的,下面是一位同学利用自己所学的HTML5知识自制的HTML5爱心表白动画,画面非常温馨甜蜜,这样的创意很容易打动女孩,如果你是单身的程序员,也赶紧来制作自己的爱心 ...