vue时间处理
https://blog.csdn.net/xc9711/article/details/123347629
前言
记录vue对时间的处理
String与时间戳、时间互转
计算时间差
设置时间格式:
- YYYY-MM-DD HH:mm:ss 年月日 时分秒形式
- 以及HH:mm:ss 时分秒形式
时间说明
在此申明以下使用的时间相关的属性
startTime: 开始时间 String类型
endTime:结束时间 String类型
now = new Date() 当前时间 时间类型
- 1
- 2
- 3
时间处理
String 时间串转为时间类型
首先时间必须的为格式化后的时间:如2022-3-8 12:00:00
例子:
this.startTime= new Date(Date.parse(this.startTime.replace(/-/g,"/")))
- 1
处理时间格式-时间转String类型
(同步-处理时间格式)
一般来说,处理时间转String均为调用方法去处理
因此为了处理时间转String,优先需要处理设置时间格式
- 处理时间格式
在vue中处理时间转格式的在JavaScript代码的
methods: {
}
- 1
- 2
- 3
进行
- 将时间处理为年月日-时分秒形式
methods: {
// 将时间转为年月日-时分秒
// 注意,该方法将时间处理为了String
toTimeFormate(date) {
let Y = date.getFullYear()
let M = date.getMonth() + 1 - 0 >= 10 ? Number(date.getMonth()) + 1 : '0' + (Number(date.getMonth()) + 1)
let D = date.getDate()
let h = date.getHours() >= 10 ? date.getHours() : '0' + date.getHours()
let m = date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()
let s = date.getSeconds() >= 10 ? date.getSeconds() : '0' + date.getSeconds()
return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s
},
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
使用:在需要使用的地方调用方法,传入时间类型对象
this.endTime=this.toTimeFormate(this.now)
- 1
计算时间差
计算时间差需要引入moment.js
通过npm引入
cmd 打开命令行
cd/d vue项目地址
npm install moment
- 1
- 2
- 3
然后在main.js调用
import Vue from 'vue'
import moment from "moment";
moment.locale('zh-cn');
Vue.config.productionTip = false
Vue.prototype.$moment = moment
new Vue({
render: h => h(App),
}).$mount('#app')
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
最后在方法里调用处理时间差
//将String类型转时间,只有同为时间类型才能进行比较
this.endTime= new Date(Date.parse(this.endTime.replace(/-/g,"/")))
// 计算时间差,最后的结果为时间戳
const time = this.$moment(this.endTime).diff(this.$moment(new Date())) //时间类型time
- 1
- 2
- 3
- 4
将时间处理为时分秒
methods: {
// 将时间处理为时分秒
// 此方法将时间处理为String类型
// 时间戳转时分秒
toHHmmss (data) {
var s;
var hours = parseInt((data % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = parseInt((data % (1000 * 60 * 60)) / (1000 * 60));
var seconds = (data % (1000 * 60)) / 1000;
s = (hours < 10 ? ('0' + hours) : hours) + ':' + (minutes < 10 ? ('0' + minutes) : minutes) + ':' + (seconds < 10 ? ('0' + seconds) : seconds);
// 有时在处理数据库传的数据会携带很多小数点0字符,需要切割
// 如 2022-3-8 12:00:00.000000000
if (s.length>8){
s= s.slice(0,8)
}
return s;
},
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
使用:
// this.now 时间类型
this.startTime =this.toHHmmss(this.now)
- 1
- 2
- 3
时分秒转时间戳
// 时分秒转时间戳
toTimeStamp(date) {
var s = "";
var hour = date.split(":")[0];
var min = date.split(":")[1];
var sec = date.split(":")[2];
s = Number(hour * 3600) + Number(min * 60) + Number(sec);
s = s*1000
return s;
},
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
使用
// 适用于String 转时分秒格式
const time = this.toTimeStamp(this.startTime)
- 1
- 2
- 3
结语
以上为vue对时间的处理,如有遗漏将补充,下一篇发布关于vue如何编写倒计时定时器效果
vue倒计时定时器