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常见时间格式转换请查看下面的相关链接
相关推荐
-
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时间格式化实例代码
整理文档,搜刮出一个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.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将时间戳转换成自定义时间格式的方法
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 中常见的时间格式转换
项目中后台返回的时间有多种形式,时间戳.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,还适应于其他类型的 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解析与使用
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创建models时,常常会涉及时间日期字段的处理,Django里日期相关Field有DateTimeField.DateField和TimeField三种类型,看似简单,但其中有一些容易出错的地方需要注意:另外,如果不习惯Django的默认时间格式,也可以自定义的修改. DateTimeField.DateField和TimeField,其值分别对应着Python里的datetime.datetime.datetime.date和datetime.time三个实例,这三
随机推荐
- 微信小程序商城项目之淘宝分类入口(2)
- Redis和Memcached的区别详解
- jQuery实现布局高宽自适应的简单实例
- jQuery、layer实现弹出层的打开、关闭功能
- 在实战中可能碰到的几种ajax请求方法详解
- 详解iOS时间选择框
- 利用Ajax传递Xml文档
- js每次Title显示不同的名言
- JS+CSS3制作炫酷的弹窗效果
- JavaScript中值类型与引用类型实例说明
- 提高NodeJS中SSL服务的性能
- jquery判断对象是否为空并遍历对象的简单实例
- 代理网站不能访问的解决办法
- 深入Java Robot实现控制鼠标和键盘的方法详解
- Asp.net简单实现给图片增加文字水印
- 详解使用React进行组件库开发
- php-app开发接口加密详解
- JS+HTML5 Canvas实现简单的写字板功能示例
- javascript创建元素和删除元素实例小结
- uni app仿微信顶部导航条功能