vue3显示当前日期时间

你可以使用 JavaScript 的 Date 对象来获取当前日期时间和周几。在 Vue3 中，你可以在组件的 `data()` 方法中定义一个 `currentDate` 变量来存储当前日期时间和周几的信息，然后在模板中使用这个变量来显示。 以下是一个示例代码： ```html <template> <div> <p>当前日期时间：{{ currentDate }}</p> <p>今天是周{{ weekDay }}</p> </div> </template> <script> export default { data() { const date = new Date(); const year = date.getFullYear(); const month = date.getMonth() + 1; const day = date.getDate(); const hour = date.getHours(); const minute = date.getMinutes(); const second = date.getSeconds(); const weekDay = date.getDay(); const currentDate = `${year}年${month}月${day}日 ${hour}:${minute}:${second}`; return { currentDate, weekDay, }; }, }; </script> ``` 在上面的代码中，我们使用 JavaScript 的 `Date` 对象获取当前日期时间和周几的信息，并将它们存储在 `currentDate` 和 `weekDay` 变量中。然后在模板中使用 `currentDate` 和 `weekDay` 变量来显示。注意，`getDay()` 方法返回的是数字表示周几，从 0（周日）到 6（周六）。因此我们需要将其转换为对应的中文文本。

可以使用以下代码来在Vue3中获取当前日期： ```html <template> <div> <p>Today is {{ currentDate }}</p> </div> </template> <script> import { ref, onMounted } from 'vue'; export default { setup() { const currentDate = ref(''); const getCurrentDate = () => { const now = new Date(); const year = now.getFullYear(); const month = now.getMonth() + 1; const day = now.getDate(); currentDate.value = `${year}-${month}-${day}`; }; onMounted(getCurrentDate); return { currentDate, }; }, }; </script> ``` 在这个例子中，我们使用了Vue3的`ref`和`onMounted`函数来定义和初始化一个`currentDate`变量。然后，我们定义了`getCurrentDate`函数来获取当前日期，并将结果更新到`currentDate`变量中。最后，我们在组件的`setup`函数中调用`onMounted`函数来在组件挂载后执行`getCurrentDate`函数。 通过这样的方式，我们可以在Vue3中获取并显示当前日期。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue中获取当天日期（年-月-日）](https://blog.csdn.net/weixin_43822324/article/details/130881241)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [vue3获取当前日期、时间和星期（格式：年月日 时分秒 星期）](https://blog.csdn.net/weixin_44096999/article/details/131207411)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]