Vue3实时更新时间(年-月-日 时:分:秒)

代码案例

复制代码
<script lang="ts" setup>
import { ref,onMounted } from 'vue';
const timer = ref()
const date = ref("")//年月日
const moreTime = ref("")//时分秒
onMounted(()=>{
    //创建定时器1秒执行一次
    timer.value = setInterval(() => {
        formateDate()
    }, 1000)
})
//取消定时器
onBeforeUnmount(() => {
    clearInterval(timer.value) //清除定时器
})
//获取当前时间
const formateDate = () => {
    const time = new Date()
    const year = time.getFullYear()
    const month = complement(time.getMonth() + 1)
    const day = complement(time.getDate())
    const hour = complement(time.getHours())
    const minute = complement(time.getMinutes())
    const second = complement(time.getSeconds())
    moreTime.value = `${hour}:${minute}:${second}`
    date.value = `${year}-${month}-${day}`
}
//当时间为个位数的时候,在数字前加0
const complement = (value: number): string => {
    return value < 10 ? `0${value}` : value.toString()
}
</script>

运行结果

相关推荐
遇见你...14 小时前
TypeScript
前端·javascript·typescript
Highcharts.js14 小时前
Highcharts Grid 中文站正式上线:表格数据处理的全新选择
前端·javascript·数据库·表格数据·highcharts·可视化图表·企业级图表
阿正的梦工坊17 小时前
JavaScript 微任务与宏任务完全指南
开发语言·javascript·ecmascript
懂懂tty17 小时前
CRA 迁移 Rspack(实战)
前端·架构
小码哥_常18 小时前
Kotlin 助力 Android 启动“大提速”
前端
GreenTea19 小时前
AI 时代,工程师的不可替代性在哪里
前端·人工智能·后端
Jagger_19 小时前
能不能别再弄低代码害人了
前端
朦胧之19 小时前
AI 编程开发思维
前端·后端·ai编程
踩着两条虫20 小时前
VTJ:快速开始
前端·低代码·架构
木斯佳21 小时前
前端八股文面经大全:携程前端一面(2026-04-17)·面经深度解析
前端·状态模式