【Vue】vue如何将秒数转成“时分秒”格式
vue如何将秒数转成“时分秒”格式
- 一、使用原生JS的Date库
- 二、使用day.js
- 三、拓展
今天给大家分享一下vue如何将秒数转成“时分秒”格式的相关知识点,可能还有一部分人都还不太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获。
一、使用原生JS的Date库
在Vue.js中,将时间格式化成所需的字符串是一个较为普遍的需求。在这里,我们可以利用JavaScript原生的Date库来实现。
具体步骤如下:
- 将秒数转换成毫秒数
首先,我们需要将给定的秒数转化成毫秒数,这可以通过乘以1000来实现。
let time = 1485; // 1485秒
let ms = time * 1000; // 1485000毫秒
- 构造Date对象
然后,我们可以使用Date构造函数来创建一个新的Date实例。
let time = 1485; // 1485秒
let ms = time * 1000; // 1485000毫秒
let date = new Date(ms);
- 格式化时间
最后,我们可以使用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来格式化时间非常简单,我们可以通过以下步骤来实现:
- 安装Day.js
首先,在Vue.js项目中安装Day.js。可以使用npm包管理器进行安装:
npm install dayjs
或者使用CDN方式引入Day.js的库文件:
<script src="https://cdn.jsdelivr.net/npm/dayjs"></script>
- 导入Day.js
在Vue.js组件中导入Day.js,并将它绑定到组件的data中:
import dayjs from 'dayjs';export default {data() {return {dayjs: dayjs,time: 1485};}
}
- 格式化时间
最后,我们可以通过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:ssreturn `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})
在需要进行格式化处理的地方直接引用即可,此处以 elementui 中的表格引用为例
<el-table-column label="使用有效期"><template slot-scope="scope">{{scope.row.beginTime | dataFormat}}</template>
</el-table-column>
本文完结!
【Vue】vue如何将秒数转成“时分秒”格式相关推荐
- Hive秒数转成时分秒
Hive秒数转成时分秒 问题:开发当中遇到秒数转成时分秒的情况 1.参考:在mysql中可以使用SEC_TO_TIME 2.套用到hive,没有SEC_TO_TIME函数 3.解决方案:使用多个函数进 ...
- 将秒数转成时分秒(如 /视频播放时长,555秒 就是 09:15) 9分15秒
http://blog.csdn.net/Hsunpeng/article/details/51446032 sprintff-返回一个格式化的字符串 intval - 获取变量的整数值 //视频播 ...
- python时间转绝对秒数_python时间时分秒与秒数的互相转换
受到Unix时间戳的启发,我发现时间转成秒数后会非常好处理,在程序当中不再是以字符串的形式处理,不管时间的加减还是获取随机的时间点都变得非常方便, 如果有需要,也很容易转换成需要的时间格式. 一:时间 ...
- php 时分秒转时分_PHP函数gmstrftime()将秒数转换成天时分秒
一个应用场景需要用到倒计时的时分秒,比如新浪微博授权有效期剩余: 7天16小时47分钟42秒-- 在PHP环境下,PHP函数 gmstrftime() 可实现将秒数转换成时分秒的转换,先看例子: de ...
- PHP函数gmstrftime()将秒数转换成天时分秒
一个应用场景需要用到倒计时的时分秒,比如新浪微博授权有效期剩余: 7天16小时47分钟42秒-- gmstrftime() 可实现将秒数转换成时分秒的转换,先看例子: <?phpdefine(& ...
- java 秒转换日期_Java 将日期或秒数转换为日时分秒
```java import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; / ...
- 拿到倒计时秒数转成 时:分:秒格式
倒计时功能的需要,从后台拿到服务器剩余的秒数,转化成 时:分:秒的格式展示到页面上,时分秒不足两位数时前面补0. /*** 秒数转 时:分:秒* @param {Number} time [秒数]*/ ...
- js根据字符串时分秒获取总秒数和分割时分秒
起初是因为一些网站的视频没找着时间戳,但是显示了视频的时长时分秒,为了做过滤处理,就想到了获取到视频上显示的的时分秒,进行截取,然后根据秒数判断该视频的时长进行筛选 /*** 分割时分秒字符串* @p ...
- 【时间转换】将秒转换成“时分秒”格式
最近在做项目时有个发送消息限制需求:每个用户一天最多发送10条消息,超过10条后台给出剩余时长提示.后台在发送第一条消息时在redis写入标识,同时设置24小时有效器,超过10条时可以获取redis剩 ...
最新文章
- birt脚本for循环语句_Python初级教程(11): for循环语句
- HDU6428-Calculate-数论函数
- IDEA Translation插件安装及设置鼠标悬浮提示的自动翻译
- 初学者都在坑里!不要在Python中使用“+”来连接字符串
- jquery ajax返回html乱码解决
- python内建函数是什么意思_python内建函数是什么意思
- iOS 用Swipe手势和动画实现循环播放图片
- 页面缓存 OutputCache
- MongoDB数据库基础教程
- IBM ThinkPad SL400 XP驱动
- CSND自定义模块管理
- Windows Server 2012 R2 服务器密码忘记问题
- 第8章 卷积神经网络
- PART 3.3 风控建模卡方分箱计算篇
- python函数使用格式刷_Excel格式刷用法汇总分享,学到就是赚到!
- API等级和Android版本对应关系以及历史
- 微信小程序 getPhoneNumber获取用户手机号
- CoolWeather地区无法加载
- 初学者javaweb基本使用方法
- 环境变量:用户变量和系统变量
热门文章
- 微信公众号语音信息自动回复语音信息
- matlab中电压幅值不对,基于MATLAB的SPWM电压型逆变器的仿真与分析
- 产品经理 MRD PRD BRD
- VC++——一档多视
- 操作系统同步问题:有一个没有限量的大盘子,爸爸只往里面放苹果,妈妈只往里面放桔子,儿子只拿苹果吃,女儿只拿桔子吃,请写出能描述4个人行为的同步方案
- 终端运行ipynb文件
- 基于python抓取图片或PDF文字(中文和英文)
- 振动测量技术的概论及传感器测试
- C语言:scanf()语句错误读取
- matlab高精度工具箱,高精度捷联惯性导航系统Matlab工具箱