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>

运行结果

相关推荐
前端的日常7 分钟前
以下代码,那一部分运行快
前端
GeGarron9 分钟前
Drawing:专注高效画图,让每一次创作都值得被珍藏
前端
梨子同志9 分钟前
Vue v-model 指令详解
前端·vue.js
杨进军9 分钟前
简易实现 React 页面初次渲染
前端·react.js·前端框架
血舞之境11 分钟前
同名类引发问题:没见过世面导致遇见各种诡异的问题
前端
杨进军11 分钟前
实现 React 多个原生标签子节点渲染
前端·react.js·前端框架
前端的日常12 分钟前
AI 工具中,经常提到的 mcp 是什么,有哪些与前端方向结合的场景?
前端
嘉小华12 分钟前
Android 协程全景式深度解析:第四章 Flow响应式流
android·前端
Tina_晴14 分钟前
【基础篇】Promise初体验+案例分析(上)
前端·javascript·面试
7ayl15 分钟前
闭包
javascript