vue时间处理

vue时间处理
https://blog.csdn.net/xc9711/article/details/123347629

前言

记录vue对时间的处理

String与时间戳、时间互转
计算时间差
设置时间格式：

1. YYYY-MM-DD HH:mm:ss 年月日 时分秒形式
2. 以及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，优先需要处理设置时间格式

1. 处理时间格式

在vue中处理时间转格式的在JavaScript代码的

methods: {
}
1
2
3

进行

1. 将时间处理为年月日-时分秒形式

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倒计时定时器