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>

运行结果

相关推荐
字节跳动开源几秒前
Midscene v1.0 发布 - 视觉驱动,UI 自动化体验跃迁
前端·人工智能·客户端
光影少年9 分钟前
三维前端需要会哪些东西
前端·webgl
王林不想说话1 小时前
React自定义Hooks
前端·react.js·typescript
颜酱1 小时前
滑动窗口详解:原理+分类+场景+模板+例题(视频贼清晰)
javascript
heyCHEEMS1 小时前
Uni-app 性能天坑:为什么 v-if 删不掉 DOM 节点
前端
马致良1 小时前
三年前写的一个代码工具,至今已被 AI Coding 完全取代。
前端·ai编程
橙某人1 小时前
LogicFlow 交互新体验:让锚点"活"起来,鼠标跟随动效实战!🧲
前端·javascript·vue.js
借个火er1 小时前
依赖注入系统
前端
借个火er1 小时前
项目介绍与环境搭建
前端
gustt1 小时前
React 跨层级组件通信:从 Props Drilling 到 useContext 的实战剖析
前端·react.js