Bagaimana untuk menukar saat kepada format 'jam, minit dan saat' dalam vue

Vue.js ialah salah satu rangka kerja bahagian hadapan yang lebih popular pada masa ini. Ia menyediakan banyak komponen asas dan perpustakaan alat untuk memudahkan pembangun membina aplikasi web boleh guna semula dengan cepat. Dalam Vue.js, kadangkala kita perlu menukar saat kepada format seperti "jam, minit dan saat", yang memerlukan penggunaan teknik masa pemformatan.

1 Gunakan pustaka Tarikh

Dalam Vue.js, pemformatan masa ke dalam rentetan yang diperlukan ialah keperluan biasa. Di sini, kita boleh menggunakan pustaka Tarikh asli JavaScript untuk mencapai matlamat ini.

Langkah khusus adalah seperti berikut:

1 Tukar saat kepada milisaat

Pertama, kita perlu menukar bilangan saat yang diberikan kepada milisaat, yang boleh dilakukan dengan. pendaraban Lakukan dengan 1000.

let time = 1234; // 1234秒
let ms = time * 1000; // 1234000毫秒

2. Bina objek Tarikh

Kemudian, kita boleh menggunakan pembina Tarikh untuk mencipta contoh Tarikh baharu.

let time = 1234; // 1234秒
let ms = time * 1000; // 1234000毫秒
let date = new Date(ms);

3 Masa pemformatan

Akhir sekali, kita boleh menggunakan kaedah pada prototaip Tarikh untuk memformat masa, seperti menggunakan kaedah getFullYear untuk mendapatkan tahun, kaedah getMonth untuk dapatkan bulan, dan kaedah getDay untuk mendapatkan Tarikh dsb.

Untuk menukar saat kepada format jam, minit dan saat, kami boleh melaksanakannya seperti berikut:

let time = 1234; // 1234秒
let ms = time * 1000; // 1234000毫秒
let date = new Date(ms);

let hour = date.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:20:34"

Dalam contoh di atas, kami mendapat jam masa melalui getHours, getMinutes dan kaedah getSeconds , minit dan saat, serta gunakan fungsi padStart untuk menetapkannya kepada dua digit.

2. Gunakan day.js

Day.js ialah pustaka penghuraian tarikh dan pemformatan JavaScript yang sangat sesuai untuk pembangunan pantas dalam projek Vue.js.

Menggunakan Day.js untuk memformat masa adalah sangat mudah, kita boleh melakukannya melalui langkah berikut:

1 Pasang Day.js

Pertama, dalam Vue. projek js Pasang Day.js dalam . Anda boleh menggunakan pengurus pakej npm untuk memasang:

npm install dayjs

atau gunakan CDN untuk memperkenalkan fail perpustakaan Day.js:

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

2. Import Day.js

Import Day.js dalam komponen Vue.js dan ikatkannya pada data komponen:

import dayjs from 'dayjs';

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

3 Masa pemformatan

Akhirnya, kita boleh melepasi fungsi format yang disediakan by js digunakan untuk memformat masa.

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

Dalam contoh di atas, kami mencipta tika Day.js melalui fungsi dayjs, mengambil masa yang perlu diformatkan sebagai parameter pembinanya dan menggunakan fungsi format untuk menukarnya menjadi format yang diperlukan (di sini "HH:mm:ss").

Kesimpulan

Secara umum, masa pemformatan dalam Vue.js adalah sangat mudah Kita boleh menggunakan pustaka Tarikh asli atau pustaka pihak ketiga Day.js untuk mencapainya. Kaedah yang diperkenalkan di sini hanyalah dua daripadanya Anda boleh memilih kaedah yang sesuai untuk dilaksanakan mengikut keperluan sebenar anda.

Atas ialah kandungan terperinci Bagaimana untuk menukar saat kepada format 'jam, minit dan saat' dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!