后端返回的时间戳怎么在Vue里格式化成“YYYY-MM-DD”？

皇甫银银提问于 2026-03-27 00:59:23 阅读 70

交互

我从接口拿到的数据里有个 create_time 字段，是时间戳（比如 1712345678），想在页面上显示成 “2024-04-05” 这种格式。试过直接用 new Date(item.create_time) 但显示的是完整日期加时区，不太对。

网上看到可以用 filter 或 computed 处理，但在 Vue 3 + Composition API 里有点懵，不知道放哪儿合适。而且我不想每个组件都写一遍格式化函数……有没有简洁点的办法？

<template>
  <div v-for="item in list" :key="item.id">
    {{ item.create_time }}  
  </div>
</template>

<script setup>
const list = [
  { id: 1, create_time: 1712345678 },
  { id: 2, create_time: 1712456789 }
]
</script>

数据交互数据格式化

我来解答赞 19 收藏

反馈

1 条解答

___嘉煊 Lv1

在 Vue 3 的 Composition API 里处理这种通用格式化问题，我建议直接用一个自定义函数来转换时间戳，然后把它放到一个独立的工具文件里，这样所有组件都能复用。

首先解决时间格式化的问题。JavaScript 的 Date 对象确实可以直接处理 Unix 时间戳，但需要把秒级时间戳转成毫秒级。试试这个函数：

function formatTime(timestamp) {

  const date = new Date(timestamp * 1000)

  const year = date.getFullYear()

  const month = ('0' + (date.getMonth() + 1)).slice(-2)

  const day = ('0' + date.getDate()).slice(-2)

  return ${year}-${month}-${day}

}

把这个函数放到一个 utils.js 文件里，然后在需要的地方 import 进来用就完事了。

接下来修改你的模板代码：

在