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>

运行结果

相关推荐
小土豆_777几秒前
Owl 2.8.1 核心语法速查表(新手专用)
前端·odoo/owl
我是伪码农4 分钟前
放大镜效果
javascript
董世昌414 分钟前
js的数据类型有几类?一共有几种?
开发语言·javascript·ecmascript
wanzhong23337 分钟前
开发日记13-响应式变量
开发语言·前端·javascript·vue
代码游侠10 分钟前
学习笔记——文件传输工具配置与Makefile详解
运维·前端·arm开发·笔记·学习
踢球的打工仔15 分钟前
typescript-类的静态属性和静态方法
前端·javascript·typescript
C_心欲无痕16 分钟前
Next.js Script 组件详解
开发语言·javascript·ecmascript·next.js
匠心网络科技16 分钟前
前端框架-Vue双向绑定核心机制全解析
前端·javascript·vue.js·前端框架
Jinuss17 分钟前
源码分析之React中的FiberRoot节点属性介绍
前端·javascript·react.js
2501_9445264223 分钟前
Flutter for OpenHarmony 万能游戏库App实战 - 收藏功能实现
android·java·开发语言·javascript·python·flutter·游戏