vue 中常见的时间格式转换

项目中后台返回的时间有多种形式，时间戳、ISO标准时间格式等，我们需要转化展示成能看的懂得时间格式：

1、将2020-06-27T14:20:27.000000Z 时间格式转换成 2020-06-27 14:20:27

可以将方法定义为全局过滤器，或全局方法方便引用

Vue.filter('format', function(date) {
var json_date = new Date(date).toJSON();
return new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
})

{{timeVal | format}}

2、将时间戳格式化

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)
}

使用方法：
formatDate(date, 'yyyy-MM-dd hh:mm')；
formatDate(date, 'yyyy-MM-dd')；

3、Vue中使用moment.js(时间格式化插件)；

安装moment.js插件

npm install moment --save

定义全局过滤器

import moment from 'moment';

Vue.filter('dateFormat',function(value,format)){
return moment(value).format(format);
}

使用方法：
{{time | dateFormat('YYYY-MM-DD HH:mm:ss')}}

直接在Vue中定义成时间格式方法：
import moment from 'moment';
Vue.prototype.$moment = moment;

在vue文件中当作方法使用
this.$moment(timeVal).format('YYYY-MM-DD'); // 2022-02-11

更多关于vue常见时间格式转换请查看下面的相关链接

赞 (0)

相关推荐

  • vue将时间戳转换成自定义时间格式的方法

    1.首先建立一个date.js文件,写入如下代码: 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.g

  • vue.js将unix时间戳转换为自定义时间格式

    本方法通过vue.js filter实现将unix时间戳转换为自定义标准时间格式 <!-- js代码 --> $().ready(function() { <!-- 自定义filter名称为'time' --> Vue.filter('time', <!-- value 格式为13位unix时间戳 --> <!-- 10位unix时间戳可通过value*1000转换为13位格式 --> function(value) { var date = new Dat

  • vue时间格式化实例代码

    整理文档,搜刮出一个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

  • vue时间转换的几种方式

    VUE 时间转换 做一个项目肯定会关系到很多的数据类型,数据类型之间都是可以转化的,,前端有时候从后端拿到的时间不符合标准,此时就需要转换以后再去使用,转换有两种方式,看你个人比较喜欢哪一种.这里已时间转换为例子 过滤器filter 全局过滤器 在main.js写入 // 时间戳过滤器 Vue.filter('dateFormat', (dataStr) => { var time = new Date(dataStr) function timeAdd0 (str) { if (str <

  • vue中的过滤器及其时间格式化问题

    一.过滤器介绍 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由 管道 符号指示: <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId">

  • vue如何使用moment处理时间戳转换成日期或时间格式

    vue如何使用moment处理时间戳转换成日期或时间格式

    目录 一.使用环境 二.安装moment 三.在vue所需页面进行引入 五.最终效果 六.moment中文官网 总结 一.使用环境 Moment 被设计为在浏览器和 Node.js 中都能工作. 所有的代码都应该在这两种环境中都可以工作,并且所有的单元测试都应该在这两种环境中运行. CI 系统当前使用以下的浏览器:Windows XP 上的 Chrome,Windows 7 上的 IE 8.9 和 10,Windows 10 上的 IE 11,Linux 上最新的 Firefox,OSX 10.

  • vue 中常见的时间格式转换

    项目中后台返回的时间有多种形式,时间戳.ISO标准时间格式等,我们需要转化展示成能看的懂得时间格式: 1.将2020-06-27T14:20:27.000000Z 时间格式转换成 2020-06-27 14:20:27 可以将方法定义为全局过滤器,或全局方法方便引用 Vue.filter('format', function(date) { var json_date = new Date(date).toJSON(); return new Date(new Date(json_date) +

  • Python中三种时间格式转换的方法

    目录 一 时间元组 二 字符串与时间戳 三 时间的加减用法 一 时间元组 1. 时间元组和时间戳的互化 import time,datetime # 获取当前时间的时间元组 t = time.localtime() print(t) # 时间元组转时间戳 timestamp = time.mktime(t) print(timestamp) # time.struct_time(tm_year=2019, tm_mon=10, tm_mday=23, tm_hour=23, tm_min=15,

  • python获取时间及时间格式转换问题实例代码详解

    整理总结一下python中最常用的一些时间戳和时间格式的转换 第一部分:获取当前时间和10位13位时间戳 import datetime, time '''获取当前时间''' n = datetime.datetime.now() print(n) '''获取10位时间戳''' now = time.time() print(int(now)) '''获取13位时间戳''' now2 = round(now*1000) print(now2) 运行结果为: 2018-12-06 11:00:30

  • vue中常见的问题及解决方法总结（推荐）

    vue中常见的问题及解决方法总结（推荐）

    有一些问题不限于 Vue,还适应于其他类型的 SPA 项目. 1. 页面权限控制和登陆验证页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的.如果一个页面,有角色越权访问,这时就得做出限制了. 一种方法是通过动态添加路由和菜单来做控制,不能访问的页面不添加到路由表里,这是其中一种办法.具体细节请看下一节的<动态菜单>. 另一种办法就是所有的页面都在路由表里,只是在访问的时候要判断一下角色权限.如果有权限就允许访问,没有

  • 浅析vue中常见循环遍历指令的使用 v-for

    vue中循环遍历使用的指令是v-for 1.v-for遍历数组 (1)value in arr 遍历数组中的元素 (2)(value,index) in arr 遍历数组中的元素和数组下标 运行代码: <body> <div class="box"> <ul> <li v-for="value in arr">{{value}}</li><br> <li v-for="(valu

  • Python中xml和dict格式转换的示例代码

    在做接口自动化的时候,请求数据之前都是JSON格式的,Python有自带的包来解决.最近在做APP的接口,遇到XML格式的请求数据,费了很大劲来解决,解决方式是:接口文档拿到的是XML,在线转化为json格式(目的是拿到xml数据的模板),存放到json文件中,根据接口名去提取. github原文介绍:使用XML的Python模块感觉就像您在使用JSON 链接:https://github.com/martinblech/xmltodict 下载xmltodict(pip install xml

  • Vue 中获取当前时间并实时刷新的实现代码

    1. 实现代码 <template> <div> {{nowDate}}{{nowWeek}}{{nowTime}} </div> </template> <script> export default { data(){ return { nowDate: "", // 当前日期 nowTime: "", // 当前时间 nowWeek: "" // 当前星期 } }, methods

  • Java 时间格式转换之impleDateFormat与Data API解析与使用

    Java 时间格式转换之impleDateFormat与Data API解析与使用

    1.创建无参数Data对象 Date d1=new Date(); //创建无参数Data对象 System.out.println(d1); //d1返回当前时间 例如返回: Sun Nov 14 18:33:05 CST 2021 2.创建有参数Data对象 返回从1970年1月1日 8时00分00秒 000毫秒加上传入的毫秒数 所能得到的时间. 1s等于1000ms 一天:86400000ms Date d2=new Date(86400000); System.out.println(d

  • vue中实现当前时间echarts图表时间轴动态的数据(实例代码)

    代码如下所示: <!-- ! 废话不多说,直接看代码吧 ! --> <template> <div class=""> <div class="chart" ref="ref_chart" style="width:370px;height:250px;"> </div> </div> </template> <script lang=&

  • Django中日期处理注意事项与自定义时间格式转换详解

    Django中日期处理注意事项与自定义时间格式转换详解

    前言 我们在用Django创建models时,常常会涉及时间日期字段的处理,Django里日期相关Field有DateTimeField.DateField和TimeField三种类型,看似简单,但其中有一些容易出错的地方需要注意:另外,如果不习惯Django的默认时间格式,也可以自定义的修改. DateTimeField.DateField和TimeField,其值分别对应着Python里的datetime.datetime.datetime.date和datetime.time三个实例,这三

随机推荐