【Vue】vue如何将秒数转成“时分秒”格式

青旅半醒 2023-10-09 20:19 21阅读 0赞

#### vue如何将秒数转成“时分秒”格式 ####

*  一、使用原生JS的Date库
 *  二、使用day.js
 *  三、拓展

今天给大家分享一下vue如何将秒数转成“时分秒”格式的相关知识点，可能还有一部分人都还不太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获。

## 一、使用原生JS的Date库 ##

在Vue.js中，将时间格式化成所需的字符串是一个较为普遍的需求。在这里，我们可以利用**JavaScript**原生的**Date**库来实现。

具体步骤如下：

1.  将秒数转换成毫秒数

首先，我们需要将给定的秒数转化成毫秒数，这可以通过乘以1000来实现。

let time = 1485; // 1485秒
    let ms = time * 1000; // 1485000毫秒

1.  构造Date对象

然后，我们可以使用**Date**构造函数来创建一个新的**Date**实例。

let time = 1485; // 1485秒
    let ms = time * 1000; // 1485000毫秒
    let date = new Date(ms);

1.  格式化时间

最后，我们可以使用Date原型上的方法来格式化时间，例如使用 **getFullYear()** 方法获取年份， **getMonth()** 方法获取月份， **getDay()** 方法获取日期等等。

对于将秒数转换为时分秒格式，我们可以如下实现：

在上面的例子中，我们通过 **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**的库文件：

1.  导入Day.js

在**Vue.js**组件中导入**Day.js**，并将它绑定到组件的**data**中：

import dayjs from 'dayjs';
    
    export default {
        
      data() {
        
        return {
        
          dayjs: dayjs,
          time: 1485
        };
      }
    }

1.  格式化时间

最后，我们可以通过**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>

本文完结！