vue将秒数转成"时分秒"格式实例代码
一、使用原生JS的Date库
在Vue.js中，将时间格式化成所需的字符串是一个较为普遍的需求。在这里，我们可以利用JavaScript原生的Date库来实现。
具体步骤如下：
1.将秒数转换成毫秒数
首先，我们需要将给定的秒数转化成毫秒数，这可以通过乘以1000来实现。
let time = 1485; // 1485秒 let ms = time * 1000; // 1485000毫秒
2.构造Date对象
然后，我们可以使用Date构造函数来创建一个新的Date实例。
let time = 1485; // 1485秒 let ms = time * 1000; // 1485000毫秒 let date = new Date(ms);
3.格式化时间
最后，我们可以使用Date原型上的方法来格式化时间，例如使用 getFullYear() 方法获取年份， getMonth() 方法获取月份， getDay() 方法获取日期等等。
对于将秒数转换为时分秒格式，我们可以如下实现：
let time = 1485; // 1485秒
let ms = time * 1000; // 1485000毫秒
let date = new Date(ms);
// 注意这里是使用的getUTCHours()方法，转换成UTC(协调世界时)时间的小时
let hour = date.getUTCHours();
// let hour = date.getHours(); 如果直接使用getHours()方法，则得到的时分秒格式会多出来8个小时（在国内开发基本都是使用的是东八区时间），getHours()方法会把当前的时区给加上。
let minute = date.getMinutes();
let second = date.getSeconds();
let formatTime = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`;
console.log(formatTime); // "00:24:45"
在上面的例子中，我们通过 getUTCHours()、getMinutes()和getSeconds() 方法获取到时间的小时数、分钟数和秒数，并使用 padStart() 函数来将它们设置成两位数。
二、使用day.js
Day.js是一种轻量级的JavaScript日期解析和格式化库，它非常适合在Vue.js的项目中进行快速开发。
使用Day.js来格式化时间非常简单，我们可以通过以下步骤来实现：
1.安装Day.js
首先，在Vue.js项目中安装Day.js。可以使用npm包管理器进行安装：
npm install dayjs
或者使用CDN方式引入Day.js的库文件：
<script src="https://cdn.jsdelivr.net/npm/dayjs"></script>
2.导入Day.js
在Vue.js组件中导入Day.js，并将它绑定到组件的data中：
import dayjs from 'dayjs';
export default {
data() {
return {
dayjs: dayjs,
time: 1485
};
}
}
3.格式化时间
最后，我们可以通过Day.js提供的 format() 函数来格式化时间。
<template>
<div>
{{dayjs(time * 1000).format('HH:mm:ss')}}
</div>
</template>在上面的例子中，我们通过dayjs函数创建了一个Day.js实例，将需要格式化的时间作为其构造函数的参数，并使用 format() 函数将其转换成所需的格式（在这里是“HH:mm:ss”）。
三、拓展
vue前台需要用户能看得懂的时间格式如常见的“2023-04-27 12:02:35”，但是后台数据库则需要时间格式如 LocalDateTime（“2021-04-27T12:02:35”）或者Date类型的，如果数据不经过处理，直接显示，肯定可读性差。
下边就介绍一下前台vue处理方式，就是在vue项目的 main.js 中创建一个过滤器，把时间格式化处理。
Vue.filter('dataFormat', function (originVal) {
const dt = new Date(originVal)
const y = dt.getFullYear()
const m = (dt.getMonth() + 1 + '').padStart(2, '0')
const d = (dt.getDate() + '').padStart(2, '0')
const hh = (dt.getHours() + '').padStart(2, '0')
const mm = (dt.getMinutes() + '').padStart(2, '0')
const ss = (dt.getSeconds() + '').padStart(2, '0')
// yyyy-mm-dd hh:mm:ss
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})
在需要进行格式化处理的地方直接引用即可，此处以 elementui 中的表格引用为例
<el-table-column label="使用有效期">
<template slot-scope="scope">{{scope.row.beginTime | dataFormat}}</template>
</el-table-column>补充：vue 秒转化为小时、分钟、秒实例
if (res.code === 200) {
// timeLong 单位：秒
let durationHour = `${parseInt(res.data.timeLong / 3600)}小时 `
let durationMi = `${parseInt(res.data.timeLong / 60)}分钟 `
const durationSecond = `${parseInt(res.data.timeLong % 60)}秒 `
// const durationSecond = parseInt((res.data.timeLong - Math.floor(res.data.timeLong)) * 60)
durationHour = parseFloat(durationHour) > 0 ? durationHour : ''
durationMi = parseFloat(durationMi) > 0 ? durationMi : ''
this.rowDetailInfo = {
...res.data,
startAndEndTime: `${res.data.startTime}-${res.data.endTime}`, // 开始/结束时间
duration: `${durationHour}${durationMi}${durationSecond}` // 巡更时长
}
this.rowDetailList = res.data.danVOS
}
this.loadingShowXGDetail = false
},以分钟为单位,譬如 1.5分钟
if (res.code === 200) {
let durationHour = `${parseInt(res.data.timeLong / 60)}小时 `
let durationMi = `${parseInt(res.data.timeLong % 60)}分钟 `
const durationSecond = parseInt((res.data.timeLong - Math.floor(res.data.timeLong)) * 60)
durationHour = parseFloat(durationHour) > 0 ? durationHour : ''
durationMi = parseFloat(durationMi) > 0 ? durationMi : ''
this.rowDetailInfo = {
...res.data,
startAndEndTime: `${res.data.startTime}-${res.data.endTime}`, // 开始/结束时间
duration: `${durationHour}${durationMi}${durationSecond}秒` // 巡更时长
}
this.rowDetailList = res.data.danVOS
}总结
到此这篇关于vue将秒数转成"时分秒"格式的文章就介绍到这了,更多相关vue秒数转时分秒格式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章介绍了Vue使用watch监听数组或对象的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要介绍了vue使用$emit实现同步调用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了详解vue 单页应用（spa）前端路由实现原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了vue正确使用watch监听属性变化方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue中的router-view父子组件传参方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
最近公司新启动了个项目，用的是vue框架在做,下面这篇文章主要给大家介绍了关于vue实现token登录验证的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了Vue中provide和inject的使用，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-08-08
这篇文章主要介绍了vue中echarts图表大小适应窗口大小且不需要刷新案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率，这篇文章主要介绍了vue-devtools的安装与使用教程,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue-router清除url地址栏路由参数,本文给大家介绍的非常详细,需要的朋友可以参考下2015-11-11
最新评论