在Vue3 + TypeScript中，我们可以使用Element Plus组件库中的时间选择器组件来进行时间格式的转换。首先要了解的是，给定的时间格式"2023-05-25T16:00:00.000Z"是ISO8601标准格式，也称为世界标准时间（Coordinated Universal Time，缩写为UTC），因此我们需要对其进行转换。

1、时间格式转换

我们可以使用JavaScript中的Date对象来将ISO8601时间格式转换为本地时间格式。具体步骤如下：

const isoTime = "2023-05-25T16:00:00.000Z";

const localTime = new Date(isoTime).toLocaleString(); // 转换为本地时间格式

console.log(localTime); // 输出结果："2023/5/26 上午12:00:00"

在这个例子中，我们首先定义了一个ISO8601时间格式的字符串变量isoTime，然后使用new Date()将其转换为Date对象，接着使用toLocaleString()将其转换为本地时间格式。最后，我们将转换后的时间输出到控制台。

需要注意的是，由于本地时区的不同，同样的ISO8601时间格式在不同的地区转换出来的本地时间也会不同。因此，在实际应用中，我们需要先确定要转换的ISO8601时间格式所处的时区，然后再进行转换。

2、Element Plus时间选择器

在Vue3 + TypeScript中，我们可以使用Element Plus组件库中的时间选择器组件来进行时间格式的转换。具体步骤如下：

<el-date-picker

v-model="date"

type="datetime"

format="yyyy-MM-dd HH:mm:ss"

placeholder="请选择时间"

></el-date-picker>

在这个例子中，我们使用了Element Plus中的<el-date-picker>组件，并通过v-model将选择的时间绑定到Vue实例中的date变量上。type属性指定了时间选择器的类型为datetime，表示既可以选择日期，也可以选择时间。format属性指定了输出的时间格式为"yyyy-MM-dd HH:mm:ss"，即年-月-日 时:分:秒的格式。placeholder属性指定了时间选择器的占位符文本为"请选择时间"。

3、完整示例代码

下面是一个完整的示例代码，其中包含了ISO8601时间格式的转换和Element Plus时间选择器的使用：

<template>

<div>

<el-date-picker

v-model="date"

type="datetime"

format="yyyy-MM-dd HH:mm:ss"

placeholder="请选择时间"

></el-date-picker>

<p>{{ date }}</p>

</div>

</template>

<script>

import { defineComponent, ref } from "vue";

export default defineComponent({

name: "TimePicker",

setup() {

const isoTime = "2023-05-25T16:00:00.000Z";

const localTime = new Date(isoTime).toLocaleString("zh-CN", {

hour12: false,

timeZone: "Asia/Shanghai",

}); // 转换为本地时间格式

const date = ref(localTime);

return {

date,

};

},

});

</script>

在这个示例中，我们首先定义了一个ISO8601时间格式的字符串变量isoTime，然后使用new Date()将其转换为Date对象，并指定了本地时区为"Asia/Shanghai"，最后使用toLocaleString()将其转换为本地时间格式。接着，我们使用Vue3中的ref函数将转换后的时间绑定到名为date的变量上，并通过<el-date-picker>组件进行显示。最后，我们在页面中输出了date变量的值，以便查看转换后的时间格式是否正确。

4、总结

通过以上步骤，我们可以使用Vue3 + TypeScript和Element Plus组件库来将ISO8601时间格式转换为本地时间格式，并在页面中进行显示。需要注意的是，在实际应用中，我们需要先确定要转换的ISO8601时间格式所处的时区，然后再进行转换，以避免转换出来的时间格式不正确。