フロントエンドはUTC時間形式をローカル時間形式に変換します~~uniappの書き込みメソッド

UTC 時間形式とは何ですか

まず、簡単に見てみましょう。UTC 時間 (協定世界時) は 24 時間時計を使用し、時間を時、分、秒、ミリ秒で表します。

HH:mm:ss.SSS
  • HH時間を示します。値の範囲は 00 ~ 23 です。
  • mm分を示します。値の範囲は 00 ~ 59 です。
  • ss秒を表します。値の範囲は 00 ~ 59 です。
  • SSSミリ秒を表し、値の範囲は 000 ~ 999 です。

UTC 時間は夏時間やタイム ゾーンの影響を考慮していないため、地理的位置の変更によって変更されない標準的な時間表現方法であることに注意してください。

変換するにはどうすればよいですか?

まず、使用できる範囲でランダムなデータのセットを準備しましょう。

以下のデータがインターフェースから取得したものであると仮定します。

				list: [{
						"id": 20,
						"goods_id": 20,
						"task_id": null,
						"deduct_num": 120,
						"integral_num": null,
						"type": 2,
						"created_at": "2023-08-31T02:56:02.000000Z"
					},
					{
						"id": 19,
						"goods_id": 29,
						"task_id": null,
						"deduct_num": 60,
						"integral_num": null,
						"type": 2,
						"created_at": "2023-08-31T02:55:44.000000Z"
					},
					{
						"id": 18,
						"goods_id": 12,
						"task_id": null,
						"deduct_num": 60,
						"integral_num": null,
						"type": 2,
						"created_at": "2023-08-31T02:41:32.000000Z"
					},
					{
						"id": 17,
						"goods_id": 9,
						"task_id": null,
						"deduct_num": 220,
						"integral_num": null,
						"type": 2,
						"created_at": "2023-08-31T02:23:40.000000Z"
					},
					{
						"id": 16,
						"goods_id": 25,
						"task_id": null,
						"deduct_num": 40,
						"integral_num": null,
						"type": 2,
						"created_at": "2023-08-31T02:18:09.000000Z"
					},
					{
						"id": 15,
						"goods_id": 30,
						"task_id": null,
						"deduct_num": 160,
						"integral_num": null,
						"type": 2,
						"created_at": "2023-08-31T01:15:15.000000Z"
					}
				],

v-forこのディレクティブを使用してlist配列を反復処理し、convertUTCtoLocal各オブジェクトのフィールドを UTC 時間形式からローカル時間形式に変換するメソッドを呼び出しますcreated_at最後に、現地時間がインターフェースに表示されます。

時間データが正しい形式とタイプであること、および考えられるエラー状態が適切に処理されていることを必ず確認してください。

  convertUTCtoLocal(utcTime) {
      const utcDate = new Date(utcTime);
      const localDate = new Date(utcDate.getTime() + utcDate.getTimezoneOffset() * 60000);
      return localDate.toLocaleString();
    }

ページレンダリング部分

  <ul>
      <li v-for="(item, index) in list" :key="index">
        <p>ID: {
   
   { item.id }}</p>
        <p>本地时间: {
   
   { convertUTCtoLocal(item.created_at) }}</p>
      </li>
    </ul>

最終効果

5741beb57d254a16b94618550e895c2f.png

おすすめ

転載: blog.csdn.net/A12536365214/article/details/132599549