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>

运行结果

相关推荐
该用户已不存在17 小时前
这6个网站一旦知道就离不开了
前端·后端·github
Ai行者心易17 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端·后端
东东23317 小时前
前端开发中如何取消Promise操作
前端·javascript·promise
掘金安东尼17 小时前
官方:什么是 Vite+?
前端·javascript·vue.js
柒崽17 小时前
ios移动端浏览器,vh高度和页面实际高度不匹配的解决方案
前端
渣哥17 小时前
你以为 Bean 只是 new 出来?Spring BeanFactory 背后的秘密让人惊讶
javascript·后端·面试
烛阴17 小时前
为什么游戏开发者都爱 Lua?零基础快速上手指南
前端·lua
大猫会长17 小时前
tailwindcss出现could not determine executable to run
前端·tailwindcss
Moonbit17 小时前
MoonBit Pearls Vol.10:prettyprinter:使用函数组合解决结构化数据打印问题
前端·后端·程序员
533_18 小时前
[css] border 渐变
前端·css