获取当前日期 vue
时间: 2025-05-14 10:51:30 浏览: 30
### 如何在 Vue 中获取并显示当前日期
在 Vue.js 中可以通过 `ref` 或者其他响应式数据绑定的方式实现动态更新的时间展示。以下是基于 Vue 3 的解决方案:
#### 使用 `Date()` 和定时器实现实时更新
通过设置一个定时器来定期更新时间,可以确保页面上的时间始终是最新的。
```javascript
<template>
<div class="time">
当前时间:{{ currentTime }}
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
// 定义响应式的currentTime变量
const currentTime = ref(new Date().toLocaleString());
// 更新时间函数
function updateTime() {
currentTime.value = new Date().toLocaleString();
}
onMounted(() => {
const intervalId = setInterval(updateTime, 1000); // 每隔一秒更新一次时间
});
onUnmounted(() => {
clearInterval(intervalId); // 组件卸载时清除定时器
});
</script>
```
上述代码实现了每秒钟刷新一次时间的功能[^1]。其中使用了 `setInterval` 来周期性调用 `updateTime` 函数,并且在组件销毁时清理掉定时器以防止内存泄漏。
#### 格式化日期字符串
如果需要更复杂的日期格式处理,推荐引入第三方库如 dayjs 或 moment.js 进行辅助开发。下面是一个简单的例子展示了如何利用 dayjs 对日期进行格式化:
```javascript
<template>
<div class="time">
昨天的日期:{{ formattedYesterday }}
</div>
</template>
<script setup lang="ts">
import dayjs from 'dayjs';
// 计算昨天的日期
const yesterday = dayjs().subtract(1, 'day');
const formattedYesterday = dayjs(yesterday).format('YYYY-MM-DD');
export default {
data() {
return {
formattedYesterday,
};
},
};
</script>
```
此部分代码演示了如何计算昨日的具体日期以及将其转换为指定格式的过程[^2]。
---
###
阅读全文
相关推荐


















