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>

运行结果

相关推荐
祈祷苍天赐我java之术18 分钟前
CSS 进阶用法
前端·css
2501_915106323 小时前
移动端网页调试实战,iOS WebKit Debug Proxy 的应用与替代方案
android·前端·ios·小程序·uni-app·iphone·webkit
柯南二号4 小时前
【大前端】React Native 调用 Android、iOS 原生能力封装
android·前端·react native
睡美人的小仙女1276 小时前
在 Vue 前端(Vue2/Vue3 通用)载入 JSON 格式的动图
前端·javascript·vue.js
yuanyxh6 小时前
React Native 初体验
前端·react native·react.js
大宝贱6 小时前
H5小游戏-超级马里奥
javascript·css·html·h5游戏·超级马里奥
程序视点6 小时前
2025最佳图片无损放大工具推荐:realesrgan-gui评测与下载指南
前端·后端
程序视点7 小时前
2023最新HitPaw免注册版下载:一键去除图片视频水印的终极教程
前端
喔烨鸭8 小时前
前后端分离情况下,将本地vue项目和Laravel项目以及mysql放到自己的云服务器
vue.js·mysql·laravel
小只笨笨狗~9 小时前
el-dialog宽度根据内容撑开
前端·vue.js·elementui