[Vue] ¿Cómo convierte vue el número de segundos en formato de "hora, minuto y segundo"?

Hoy, me gustaría compartir con ustedes algunos puntos de conocimiento sobre cómo Vue convierte segundos en formato de "hora, minuto y segundo". Puede haber algunas personas que no sepan mucho sobre este conocimiento, así que comparto este artículo para su referencia. Espero que puedas leerlo Después de terminar este artículo, gané algo.

1. Biblioteca de fechas usando JS nativo

En Vue.js, es un requisito común formatear el tiempo en las cadenas requeridas. Aquí, podemos usar la biblioteca Date nativa de JavaScript para lograrlo.

Los pasos específicos son los siguientes:

1. Convertir segundos a milisegundos

Primero, necesitamos convertir el número dado de segundos en milisegundos, lo que se puede hacer multiplicando por 1000.

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

2. Objeto de fecha de construcción

Luego, podemos usar el constructor de Fecha para crear una nueva instancia de Fecha .

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

3. tiempo de formato

Finalmente, podemos usar los métodos en el prototipo de fecha para formatear la hora, como el método getFullYear() para obtener el año, el método getMonth() para obtener el mes, el método getDay() para obtener la fecha, etc. en.

Para convertir el número de segundos al formato de hora-minuto-segundo, podemos implementarlo de la siguiente manera:

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"

En el ejemplo anterior, obtenemos las horas, los minutos y los segundos de la hora a través de los métodos getUTCHours(), getMinutes() y getSeconds() , y usamos la función padStart() para establecerlos en dos dígitos.

2. Usa día.js

Day.js es una biblioteca liviana de formato y análisis de fechas de JavaScript , que es muy adecuada para el desarrollo rápido en proyectos Vue.js.

Usar Day.js para formatear la hora es muy sencillo, podemos hacerlo a través de los siguientes pasos:

1. Instalar Day.js

Primero, instale Day.js en su proyecto Vue.js. Se puede instalar usando el administrador de paquetes npm:

npm install dayjs

O use el método CDN para importar los archivos de biblioteca de Day.js :

<script src="https://cdn.jsdelivr.net/npm/dayjs"></script>

2. importar día.js

Importe Day.js en el componente Vue.js y vincúlelo a los datos del componente :

import dayjs from 'dayjs';

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

3. tiempo de formato

Finalmente, podemos formatear la hora con la función format() proporcionada por Day.js.

<template>
  <div>
    {
    
    {
    
    dayjs(time * 1000).format('HH:mm:ss')}}
  </div>
</template>

En el ejemplo anterior, creamos una instancia de Day.js a través de la función dayjs, nos tomamos el tiempo para formatearla como un parámetro de su constructor y usamos la función format() para convertirla al formato requerido (aquí " HH:mm :ss").

3. Expansión

La recepción de vue necesita un formato de hora que los usuarios puedan entender, como el común "2023-04-27 12:02:35", pero la base de datos de fondo necesita un formato de hora como LocalDateTime ("2021-04-27T12:02 :35") o Tipo de fecha, si los datos se muestran directamente sin procesamiento, la legibilidad definitivamente será deficiente.

A continuación, se presentará el método de procesamiento front-end vue, que consiste en crear un filtro en main.js del proyecto vue para formatear la hora.

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}`
})

Se puede citar directamente donde se requiere formato.Aquí, la referencia de la tabla en elementui se toma como ejemplo.

<el-table-column label="使用有效期">
    <template slot-scope="scope">{
    
    {
    
    scope.row.beginTime | dataFormat}}</template>
</el-table-column>

¡Este artículo ha terminado!