转自西风XF : https://blog.csdn.net/qq_36242361/article/details/79143050

后端传过来的时间数据是时间戳的形式,前端需要进行格式化

1. 新建一个 js 文件,取名为 date.js。 2. vue中引入此文件

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)
};
<!-- **.vue -->
<template>
<!-- time时间戳 -->
<div>{{time | formatDate}}</div>
<!-- 输出结果 -->
<!-- <div>2016-07-23 21:52</div> -->
</template>
<script>
import {formatDate} from './common/date.js';
export default {
filters: {
formatDate(time) {
var date = new Date(time);
return formatdate(date, 'yyyy-MM-dd hh:mm:ss'); // 此处可根据自己的需要自定义想要的日期格式
}
}
}
</script>

vue 前端将时间戳格式化的更多相关文章

  1. 字符串长度计算、截取、url参数获取、计算百分比、时间戳格式化

    1.中英混合文字字符截取 //中文长度截取计算,可取中英混合,个数向上取整,精确度1个英文字符误差,一个英文算一个字符,一个汉字算一个字符. //sub("中文zlsd",1) - ...

  2. mysql 时间戳格式化函数FROM_UNIXTIME和UNIX_TIMESTAMP函数的使用说明

    我们一般使用字段类型int(11)时间戳来保存时间,这样方便查询时提高效率.但这样有个缺点,显示的时间戳,很难知道真实日期时间. MySQL提供了一个时间戳格式化函数from_unixtime来转换格 ...

  3. vue 前端框架 (三)

    VUE 生命周期 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  4. vue 前端框架 目录

    vue 前端框架 目录   vue-目录 ES6基础语法 vue基础语法 Vue.js的组件化思想 —上 Vue.js的组件化思想 —下 Vue + Vue-Router结合开发 SublimeSer ...

  5. vue前端开发那些事——后端接口.net core web api

    红花还得绿叶陪衬.vue前端开发离不开数据,这数据正来源于请求web api.为什么采用.net core web api呢?因为考虑到跨平台部署的问题.即使眼下部署到window平台,那以后也可以部 ...

  6. vue前端+java后端 vue + vuex + koa2开发环境搭建及示例开发

    vue + vuex + koa2开发环境搭建及示例开发 https://segmentfault.com/a/1190000012918518 vue前端+java后端 https://blog.c ...

  7. js时间格式化工具,时间戳格式化,字符串转时间戳

    在开发中经常会用到时间格式化,有时候在网上搜索一大堆但不是自己想要的,自己总结一下,写一个时间格式化工具方便以后直接使用,欢迎大家来吐槽…… 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  8. mysql 时间戳格式化函数from_unixtime使用说明

    我们一般使用字段类型int(11)时间戳来保存时间,这样方便查询时提高效率.但这样有个缺点,显示的时间戳,非常难知道真实日期时间. mysql提供了一个时间戳格式化函数from_unixtime来转换 ...

  9. 基于vue+springboot+docker网站搭建【五】部署vue前端项目

    部署vue前端项目  一.下载项目到本地   https://github.com/macrozheng/mall-admin-web 二.npm install 三.修改api配置,改为你接下来要部 ...

随机推荐

  1. 在linux系统部署Svn

      步骤一:安装subversion 1) 连接xshell,在xshell输入命令:yum install subversion 2) 查看安装svn服务的版本:svnserve --version ...

  2. dotnet中Stream、string及byte[]的相关操作

    string与byte[](UTF-8) //string to byte[] string str = "abc中文"; //0x61 0x62 0x63 0xE4 0xB8 0 ...

  3. 微信小程序开发笔记

    前言: 因为前段时间一直在做关于微信小程序方面的项目,作为一名后端的攻城狮而言做一些简单的前端页面数据操作和管理还是比较容易快上手的,当然前提是要理解微信小程序的基本语法和请求原理.该篇博客主要记录的 ...

  4. mpvue小程序开发之 iconfont图标引入

    背景: mpvue进行小程序项目开发时候,会有很多图标需求,但是小程序官方提供的icon图标库实在有限而且也不利于调样式,所有想到和之前前端项目一样引入iconfont. 图标加入购物车及项目 下载到 ...

  5. Oracle权限授予

    一.用户 sys;//系统管理员,拥有最高权限 system;//本地管理员,次高权限 scott;//普通用户,密码默认为tiger,默认未解锁 二.登陆 sqlplus / as sysdba;/ ...

  6. springcloud~配置中心实例搭建

    server端 build.gradle相关 dependencies { compile('org.springframework.cloud:spring-cloud-config-server' ...

  7. mysql存储过程 带参数 插入 操作

    今天再次添补一下小小内容,闲话不多说,直入标题. 先来看下,如何创建带参数的 存储过程(ps:本文只限mysql5及以上版本) CREATE PROCEDURE prSaveFileInfo(Tabl ...

  8. 编程心法 之 Scrum - Agile 敏捷开发

    Scrum是一种敏捷开发的方法 先定一个能达到的小目标 Scrum 团队 包括产品负责人.开发团队和Scrum Master Product Owner 产品负责人:管理代办事项和优先级的唯一负责人. ...

  9. 编程心法 之 怎么选择合适的IDE

    一般情况下,使用IDE进行开发可以极大的提高开发效率 最佳选择 如果语言是GNU开源的则Eclipse,因为Eclipse就是开源的 例如C和C++这样的底层语言并且经典的语言,基于GNU的语言,推荐 ...

  10. mysql生成日期的辅助表

    为了解决mysql按日期分组查询统计的时候,没有数据补0.可以生成连续的时间表格来辅助查询* 生成按天的数据 * 每一个小时为一个分段 生成如下辅助表 *代码如下 CREATE TABLE num ( ...