Nuxt.js中如何实现YYYY/MM/DD格式的日期格式化？

你的代码里存在几个问题导致日期格式化失败：

• 原生JavaScript的Date对象没有内置的format方法，直接调用new Date(time).format("YYYY/MM/DD")会报错
• 同时混用了<script setup>和传统的export default写法，导致formatDate方法无法被模板正确访问
• 如果story.time是秒级Unix时间戳，需要先乘以1000转成毫秒才能正确生成Date对象

下面提供几种可行的解决方案：

方案1：手动实现格式化（无依赖） #

修正脚本结构，用<script setup>单独定义方法，手动提取并格式化年、月、日：

<template>
    <div>
        <div class="card text-center">
            <h2><strong>Title: </strong>{{story.title}}</h2>  
            <p><strong>Score: </strong>{{story.score}}</p>  
            <p><strong>Author: </strong>{{story.by}}</p>  
            <p><strong>Date: </strong>{{ formatDate(story.time) }}</p>
            <NuxtLink :to="`/${story.id}`">
                <p class="btn my-4">View details</p> 
            </NuxtLink>
        </div>
    </div>
</template>

<script setup>
const { story } = defineProps(['story']) 

const formatDate = (timestamp) => {
    // 转成毫秒级时间戳，若你的time已是毫秒级可去掉*1000
    const date = new Date(timestamp * 1000);
    const year = date.getFullYear();
    // 月份从0开始，+1后补0确保两位
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}/${month}/${day}`;
}
</script>

方案2：使用原生Intl.DateTimeFormat（推荐） #

利用浏览器原生的国际化API，写法更简洁，还能兼容不同地区格式：

<template>
    <!-- 模板部分和上面一致 -->
</template>

<script setup>
const { story } = defineProps(['story']) 

const formatDate = (timestamp) => {
    const date = new Date(timestamp * 1000);
    // 指定中文地区，确保格式为YYYY/MM/DD
    return new Intl.DateTimeFormat('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
    }).format(date);
}
</script>

方案3：使用第三方库（如date-fns） #

如果项目需要更复杂的日期处理，可以集成轻量级的date-fns库：

1. 先安装依赖：

npm install date-fns

2. 在组件中使用：

<template>
    <!-- 模板部分不变 -->
</template>

<script setup>
import { format } from 'date-fns';
const { story } = defineProps(['story']) 

const formatDate = (timestamp) => {
    const date = new Date(timestamp * 1000);
    return format(date, 'yyyy/MM/dd');
}
</script>

内容的提问来源于stack exchange，提问作者Azizxon Zufarov