vue时间处理

您所在的位置：网站首页 › 用vue如何去掉结尾 › vue时间处理

vue时间处理

2023-09-07 03:50| 来源: 网络整理| 查看: 265

前言记录vue对时间的处理

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

YYYY-MM-DD HH:mm:ss 年月日时分秒形式以及HH:mm:ss 时分秒形式时间说明

在此申明以下使用的时间相关的属性

startTime: 开始时间 String类型 endTime:结束时间 String类型 now = new Date() 当前时间时间类型时间处理

String 时间串转为时间类型首先时间必须的为格式化后的时间：如2022-3-8 12:00:00 例子：

this.startTime= new Date(Date.parse(this.startTime.replace(/-/g,"/")))

处理时间格式-时间转String类型（同步-处理时间格式）一般来说，处理时间转String均为调用方法去处理因此为了处理时间转String，优先需要处理设置时间格式

处理时间格式

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

methods: { }

进行

将时间处理为年月日-时分秒形式 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 }, }

使用：在需要使用的地方调用方法，传入时间类型对象

this.endTime=this.toTimeFormate(this.now) 计算时间差

计算时间差需要引入moment.js 通过npm引入

cmd 打开命令行 cd/d vue项目地址 npm install moment

然后在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')

最后在方法里调用处理时间差

//将String类型转时间，只有同为时间类型才能进行比较 this.endTime= new Date(Date.parse(this.endTime.replace(/-/g,"/"))) // 计算时间差，最后的结果为时间戳 const time = this.$moment(this.endTime).diff(this.$moment(new Date())) //时间类型time 将时间处理为时分秒 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 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; }, 使用 // 适用于String 转时分秒格式 const time = this.toTimeStamp(this.startTime) 结语

以上为vue对时间的处理，如有遗漏将补充，下一篇发布关于vue如何编写倒计时定时器效果 vue倒计时定时器

【本文地址】

vue时间处理

vue时间处理

今日新闻

推荐新闻