vueで秒を「時、分、秒」形式に変換する方法

Vue.js は、現在最も人気のあるフロントエンド フレームワークの 1 つであり、開発者が再利用可能な Web アプリケーションを迅速に構築できるよう、多くの基本コンポーネントとツール ライブラリを提供します。 Vue.js では、秒を「時、分、秒」などの形式に変換する必要がある場合があります。これには、時間の書式設定テクニックを使用する必要があります。

1. Date ライブラリの使用

Vue.js では、時刻を必要な文字列にフォーマットすることが一般的な要件です。ここでは、JavaScript のネイティブ Date ライブラリを使用してこれを実現できます。

具体的な手順は次のとおりです:

1. 秒をミリ秒に変換する

まず、指定された秒数をミリ秒に変換する必要があります。乗算 1000 で実行します。

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

2. Date オブジェクトを構築する

次に、Date コンストラクターを使用して新しい Date インスタンスを作成します。

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

3. 時刻の書式設定

最後に、getFullyear メソッドを使用して年を取得し、getMonth メソッドを使用して年を取得するなど、Date プロトタイプのメソッドを使用して時刻を書式設定できます。月、日付を取得する getDay メソッドなどを待ちます。

秒を時、分、秒の形式に変換するには、次のように実装できます。

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"

上の例では、getHours、getMinutes を通じて時刻の時と分を取得します。 getSeconds メソッドと秒を使用し、padStart 関数を使用してそれらを 2 桁に設定します。

2. day.js を使用する

Day.js は、軽量の JavaScript 日付解析および書式設定ライブラリであり、Vue.js プロジェクトでの迅速な開発に非常に適しています。

Day.js を使用して時刻をフォーマットするのは非常に簡単で、次の手順で実行できます:

1. Day.jsをインストールします

まず、Vue に Day.js をインストールします。 js プロジェクト Day.js を にインストールします。 npm パッケージ マネージャーを使用してインストールすることができます:

npm install dayjs

または CDN を使用して Day.js ライブラリ ファイルを導入します:

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

2. Vue に Day.js

をインポートしますDay.js を js コンポーネントにインポートし、コンポーネントのデータにバインドします:

import dayjs from 'dayjs';

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

3. 時間のフォーマット

最後に、Day.js が提供するフォーマット関数を使用できます。

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

上の例では、dayjs 関数を使用して Day.js インスタンスを作成し、そのコンストラクターのパラメーターとしてフォーマットするのに必要な時間を取り、format 関数を使用して必要なインスタンスに変換しました。形式 (この場合は「HH:mm:ss」)。

結論

一般に、Vue.js での時間の書式設定は非常に簡単で、ネイティブの Date ライブラリまたはサードパーティのライブラリ Day.js を使用して実現できます。ここで紹介した方法はほんの 2 つであり、実際のニーズに応じて適切な方法を選択して実装できます。

以上がvueで秒を「時、分、秒」形式に変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。