Vue3使用格式化的当前日期

在Vue 3中初始化一个变量today为当前日期并且格式化为yyyy-mm-dd格式可以通过多种方式实现。以下是几种常见的方法格式化当前日期方法1使用JavaScript的Date对象和模板字符串script setupimport{ref,onMounted}fromvue;consttodayref();onMounted((){constdatenewDate();constyeardate.getFullYear();constmonthString(date.getMonth()1).padStart(2,0);// 月份是从0开始的constdayString(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 setupimport{ref,onMounted}fromvue;import{format}fromdate-fns;consttodayref();onMounted((){today.valueformat(newDate(),yyyy-MM-dd);});/script使用moment.js:script setupimport{ref,onMounted}fromvue;importmomentfrommoment;consttodayref();onMounted((){today.valuemoment().format(YYYY-MM-DD);});/script方法3使用原生JavaScript的toLocaleDateString方法然后手动调整格式适用于大多数浏览器script setupimport{ref,onMounted}fromvue;consttodayref();onMounted((){today.valuenewDate().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使用toLocaleDateStringimport{onMounted}fromvue;importaxiosfromaxios;// 确保已安装axios或者使用你喜欢的任何HTTP客户端exportdefault{setup(){onMounted(async(){// 获取当前日期格式为yyyy-MM-ddconstcurrentDatenewDate().toLocaleDateString(zh-CN,{year:numeric,month:2-digit,day:2-digit});// 调用后端接口try{constresponseawaitaxios.get(/your-endpoint,{params:{date:currentDate}});console.log(response.data);// 处理响应数据}catch(error){console.error(Error fetching data:,error);}});return{};// 如果setup中没有返回任何响应式对象则返回一个空对象即可}};方法2自定义格式化函数如果你需要更精确的控制日期格式可以自定义一个格式化函数import{onMounted}fromvue;importaxiosfromaxios;// 确保已安装axios或者使用你喜欢的任何HTTP客户端functionformatDate(date){constyyyydate.getFullYear();constMMString(date.getMonth()1).padStart(2,0);// 月份是从0开始的constddString(date.getDate()).padStart(2,0);return${yyyy}-${MM}-${dd};}exportdefault{setup(){onMounted(async(){// 获取当前日期并格式化constcurrentDateformatDate(newDate());// 调用后端接口try{constresponseawaitaxios.get(/your-endpoint,{params:{date:currentDate}});console.log(response.data);// 处理响应数据}catch(error){console.error(Error fetching data:,error);}});return{};// 如果setup中没有返回任何响应式对象则返回一个空对象即可}};两种方法都可以实现你的需求你可以根据个人喜好和具体需求选择使用哪一种。通常来说toLocaleDateString方法更简单易用但如果你需要更复杂的日期处理逻辑自定义函数会更灵活。