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>
最終効果