关于vue中的时间格式转化问题
作者:醉梦洛 发布时间:2024-05-13 09:44:07
标签:vue,时间格式,转化
vue时间格式转化问题
1. 效果图
2. 需求:前台展示一律用的时间规格
yyyy-MM-dd HH:mm:SS,即要求月日时分秒小于两位数的都要补0,这样显得整体化一。所以下面就是专门对月日时分秒小于10时做补0的处理,实际刚开始想到的就是直接挨个判断月日时分秒<10时,直接拼接0的想法,被同事打断了,这个方法太繁琐了。所以发现了以下简洁的方法,据说是es6中的函数用法,还没有去具体查询出处,先用着再说吧。接下来分析代码.
可以把它写在一个单独的js中,这样就可以写在公共方法里,大家都可以调用的那种,当然也可以写在你需要地方的方法里,按照自己的实际情况来
① 写在公共方法里
可以在工具文件夹底下新建一个data.js,如下:
代码部门:
其中Vue.prototype是将formatDate这个方法设置问全局方法,这样就都可以调用了,注意方法名名为formatDate,后面用
/**
* Created by syp on 2020/5/15.
*/
exports.install = function (Vue, options) {
Vue.prototype.formatDate = function (row, column) {
let data = row[column.property]
if (data == null) {
return null
}
let dt = new Date(data)
let yyyy = dt.getFullYear()
let MM = (dt.getMonth() + 1).toString().padStart(2, '0')
let dd = dt.getDate().toString().padStart(2, '0')
let h = dt.getHours().toString().padStart(2, '0')
let m = dt.getMinutes().toString().padStart(2, '0')
let s = dt.getSeconds().toString().padStart(2, '0')
return yyyy + '-' + MM + '-' + dd + ' ' + h + ':' + m + ':' + s
}
}
处理好data.js后,再在公共js中调用一下,设置为全局的,这样大家就都可以用了
然后在vue页面进行调用图:
:formatter="formatDate"
formatDate就是设置为全局方法的方法名
② 将它只是变为局部的格式化时间调用,那么就需要把格式化时间的代码放在调用页面的方法中
一下这个方法只需要放在本页面的method底下就好了
formatDate (row, column) {
let data = row[column.property]
if (data == null) {
return null
}
let dt = new Date(data)
return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
},
在列表展示的熟悉中运用和上面一样都用:formatter="formatDate"就ok了。
图示:
vue转换时间格式(适用于uni-app)
1. 前端获取实时时间
<template>
<view class="content">
<view>{{date}}</view>
</view>
</template>
<script>
export default {
data() {
return{
date: new Date()
}
},
onLoad() {},
mounted: function() {
let that = this
//setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式
//每一毫秒调用一次
that.timer = setInterval(function() {
that.date = new Date();
}, 1000)
},
beforeDestroy: function() {
if (this.timer) {
clearInterval(this.timer)
}
},
methods: {
}
}
</script>
获得国际标准时间
2. 运用过滤器
通过给Vue实例添加选项filters来设置,给时间格式化处理
<template>
?? ?<view class="content">
?? ??? ?<view>{{date ?| formatDate}}</view>
?? ?</view>
</template>
<script>
?? ?//一、时间转换关键
?? ?var padDate = function(value) {
?? ??? ?return value < 10 ? '0' + value : value;
?? ?};
?? ?export default {
?? ?//二、时间转换关键
?? ??? ?filters: {
?? ??? ??? ?formatDate: function(value) {
?? ??? ??? ??? ?var date = new Date(value);
?? ??? ??? ??? ?var year = date.getFullYear();
?? ??? ??? ??? ?var month = padDate(date.getMonth()+1);
?? ??? ??? ??? ?var day = padDate(date.getDate());
?? ??? ??? ??? ?var hours = padDate(date.getHours());
?? ??? ??? ??? ?var minutes = padDate(date.getMinutes());
?? ??? ??? ??? ?var seconds = padDate(date.getSeconds());
?? ??? ??? ??? ?return year + '-' + month + "-" + day + " ?" + hours + ":" + minutes + ":" + seconds
?? ??? ??? ?}
?? ??? ?},
?? ??? ?
?? ??? ?data() {
?? ??? ??? ?return{
?? ??? ??? ??? ?date: new Date()
?? ??? ??? ?}
?? ??? ?},
?? ??? ?onLoad() {},
?? ??? ?mounted: function() {
?? ??? ??? ?let that = this
?? ??? ??? ?//setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式
?? ??? ??? ?//每一毫秒调用一次
?? ??? ??? ?that.timer = setInterval(function() {
?? ??? ??? ??? ?that.date = new Date();
?? ??? ??? ?}, 1000)
?? ??? ?},
?? ??? ?beforeDestroy: function() {
?? ??? ??? ?if (this.timer) {
?? ??? ??? ??? ?clearInterval(this.timer)
?? ??? ??? ?}
?? ??? ?},
?? ??? ?methods: {
?? ??? ?}
?? ?}
</script>
来源:https://blog.csdn.net/weixin_39921821/article/details/106300688
0
投稿
猜你喜欢
- 用来制作甘特图的专业工具也不少,常见的有:Microsoft Office Project、GanttProject、WARCHART XG
- 打印整数16进制num=10print('%#x'%num)打印字符串中的16进制arr='12342535'
- python聊天室很多人都觉得微信,QQ,ICQ(我不知道现在还能不能用了)都过于垃圾,想要自己做一个聊天室(或是聊天软件),所以我们可以自
- 本文介绍了Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录,分享给大家,具体如下:Python 2.7I
- var fso = new ActiveXObject("Scripting.
- 定义一个什么都不做的函数>>> def a():... pass...>>> def printHell
- 一,最常见MYSQL最基本的分页方式:select * from content order by id desc limit 0, 10在
- 随滚动条移动的DIV层js代码,无论你的滚动条到哪里这个DIV层就跟到哪里!代码中例举了五个方向的滚动div层例子:包括左上方的div,左下
- JSON 相关概念:序列化(Serialization):将对象的状态信息转换为可以存储或可以通过网络传输的过程,传输的格式可以是JSON,
- 随机数我们都知道,就是计算机通过某种算法,“随机”的生成一个数字。很多编程语言都有内置的方法来生成随机数,那么 GoLang 中是怎样一种情
- 浏览网页的时候经常会碰到一些不认识的英文单词,或者想知道一些中文单词的翻译,这时候再去找翻译软件或者翻译网站就有些麻烦了。因此我做了一个“中
- 终于完成了偶的拖动窗口,花了近15个小时,庆祝一下(*^__^*);以前写了IE下的功能,于是又写了firefox下的功能,在firefox
- 本文实例讲述了Python实现扣除个人税后的工资计算器。分享给大家供大家参考,具体如下:正好处于找工作期间避免不了会跟单位谈论薪资的情况,当
- 双击编辑功能如何实现:例如:标题 (鼠标双击“标题”文字 即出现可编辑的输入框形式及提交按钮) <!D
- this指向当前作用域的对象,如果找不到,往上一层找,直到window。this 关键字很好用,很灵活,正因为很灵活,所以一不小心你就会掉进
- 导入mybatis依赖<!--mybatis--><dependency> <groupId>
- 导语嘿!前不久刚刚给大家过一款反弹球的小游戏嘛!不知道大家还记得不?不记得可以看下往期的内容呢,在上一期的基础上升级了这款打砖块的小游戏,界
- 学习自然语言的最好方法就是溶入相应的语言环境在交流中学习,学习一种编程语言的最好方法就是看例程。为了帮助大家建立wml应用的第一印象,所以请
- 影响的范围: IE的所有版本在表单的radio/checkbox控件中,一旦他们的DOM结构被更改过就会出现这个bug。bug描述当象下例中
- Python中的数据可视化matplotlib 是python最著名的绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地