Vue3使用格式化的当前日期

2026/8/15 10:28:45

在Vue 3中，初始化一个变量today为当前日期，并且格式化为yyyy-mm-dd格式，可以通过多种方式实现。以下是几种常见的方法：

格式化当前日期

方法1：使用JavaScript的Date对象和模板字符串

<script setup>import{ref,onMounted}from'vue';consttoday=ref('');onMounted(()=>{constdate=newDate();constyear=date.getFullYear();constmonth=String(date.getMonth()+1).padStart(2,'0');// 月份是从0开始的constday=String(date.getDate()).padStart(2,'0');today.value=`${year}-${month}-${day}`;});</script>

方法2：使用第三方库（如date-fns或moment.js）

如果你想要更灵活地处理日期，可以使用像date-fns或moment.js这样的库。首先需要安装这些库：

npminstalldate-fns 或者npminstallmoment

使用date-fns:

<script setup>import{ref,onMounted}from'vue';import{format}from'date-fns';consttoday=ref('');onMounted(()=>{today.value=format(newDate(),'yyyy-MM-dd');});</script>

使用moment.js:

<script setup>import{ref,onMounted}from'vue';importmomentfrom'moment';consttoday=ref('');onMounted(()=>{today.value=moment().format('YYYY-MM-DD');});</script>

方法3：使用原生JavaScript的`toLocaleDateString`方法，然后手动调整格式（适用于大多数浏览器）

<script setup>import{ref,onMounted}from'vue';consttoday=ref('');onMounted(()=>{today.value=newDate().toLocaleDateString('zh-CN',{year:'numeric',month:'2-digit',day:'2-digit'});});</script>

注意：toLocaleDateString方法会根据浏览器的本地化设置返回日期，如果你想要固定的格式（如总是yyyy-mm-dd），可能需要手动调整或使用其他库。例如，在某些情况下，你可能需要将上述代码中的'zh-CN'替换为'en-US'或其他适当的地区代码，以确保格式的正确性。对于严格的yyyy-mm-dd格式，使用date-fns或moment.js通常是更好的选择。

在OnMounted传递格式化的当前日期

在Vue 3中，如果你想在onMounted生命周期钩子中调用后端接口并传递当前日期（格式为yyyy-MM-dd），你可以使用JavaScript的Date对象来获取当前日期，然后使用toLocaleDateString或者自定义格式化函数来格式化日期。这里我将演示两种方法：

方法1：使用`toLocaleDateString`

import{onMounted}from'vue';importaxiosfrom'axios';// 确保已安装axios，或者使用你喜欢的任何HTTP客户端exportdefault{setup(){onMounted(async()=>{// 获取当前日期，格式为yyyy-MM-ddconstcurrentDate=newDate().toLocaleDateString('zh-CN',{year:'numeric',month:'2-digit',day:'2-digit'});// 调用后端接口try{constresponse=awaitaxios.get('/your-endpoint',{params:{date:currentDate}});console.log(response.data);// 处理响应数据}catch(error){console.error('Error fetching data:',error);}});return{};// 如果setup中没有返回任何响应式对象，则返回一个空对象即可}};

方法2：自定义格式化函数

如果你需要更精确的控制日期格式，可以自定义一个格式化函数：

import{onMounted}from'vue';importaxiosfrom'axios';// 确保已安装axios，或者使用你喜欢的任何HTTP客户端functionformatDate(date){constyyyy=date.getFullYear();constMM=String(date.getMonth()+1).padStart(2,'0');// 月份是从0开始的constdd=String(date.getDate()).padStart(2,'0');return`${yyyy}-${MM}-${dd}`;}exportdefault{setup(){onMounted(async()=>{// 获取当前日期并格式化constcurrentDate=formatDate(newDate());// 调用后端接口try{constresponse=awaitaxios.get('/your-endpoint',{params:{date:currentDate}});console.log(response.data);// 处理响应数据}catch(error){console.error('Error fetching data:',error);}});return{};// 如果setup中没有返回任何响应式对象，则返回一个空对象即可}};