VUE3请求数据接口，将时间戳转换为时间案例

 

	<template>
	<!-- ... 其他代码 ... -->
	<div class="w-full h-[250px] scroll_list text-[#fff] overflow-auto">
	<div class="flex" v-for="(item, index) in state.list" :key="index">
	<!-- ... 其他代码 ... -->
	</div>
	</div>
	<!-- ... 其他代码 ... -->
	</template>
	<script setup>
	import axios from 'axios';
	import { reactive, onMounted } from "vue";
	import aYinTechBorder from "./aYinTechBorder.vue";
	const state = reactive({
	list: [] // 初始化为空数组
	});
	onMounted(async () => {
	try {
	const response = await axios.post('你的url', {});
	if (response.data.data) {
	state.list = response.data.data; // 将获取到的数据存储到响应式的数据源中
	} else {
	state.list = [];
	}
	console.log(response.data);
	} catch (error) {
	console.error('请求错误:', error);
	}
	});
	</script>
	<style lang="scss" scoped></style>

在上面的代码中，我使用了 reactive 来创建一个响应式的数据源 state，其中 list 是初始化为空数组的属性。然后，在组件挂载（mounted）后，我使用了 onMounted 钩子来异步获取数据，并将获取到的数据存储到 state.list 中。这样，由于 state 是响应式的，当 state.list 更新时，模板会自动更新。

 

 

 

在Vue3中，你可以使用JavaScript的内置函数来将时间戳转换为更易读的时间格式。以下是一个示例代码，展示了如何在Vue3中实现这个功能：

javascript
复制代码
<template>
<div>
<p>{{ formatTimestamp(timestamp) }}</p>
</div>
</template>

<script>
export default {
data() {
return {
timestamp: 1626708000000 // 假设这是你的时间戳
};
},
methods: {
formatTimestamp(timestamp) {
const date = new Date(timestamp);
const minutes = date.getMinutes();
const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${minutes < 10 ? '0' : ''}${minutes}`;
return formattedDate;
}
}
};
</script>