当前位置: 首页 > news >正文

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>

运行结果


http://www.mrgr.cn/news/18825.html

相关文章:

  • 还在用谷歌翻译?这4款翻译工具也许更高效!
  • python计算机视觉编程——照相机模型与增强现实
  • kubernetes里面那些事—————存储
  • 香港服务器支持PHP吗?还支持哪些语言?
  • Vue 组件有哪些通讯方式?这里有10种方式及示例代码
  • wacat - 一款开源随机测试工具
  • AI 生成技术引领创新潮流,多领域应用展现广阔前景
  • vue3中播放m3u8,附测试网址
  • 涨薪秘籍?40w年薪项目经理力荐,10个项目管理神器大放送!
  • quartz源码-Schedule启动过程分析
  • Java算法之LRUCache缓存实现
  • JVM面试(三)类加载过程
  • 人该怎样活着呢?48
  • 深度学习引介:未来已来
  • CMake编译测试
  • 15年期权停交易的时候究竟发生了什么?期权零门槛开户怎么做?
  • ​​​​​​​《黑神话:悟空》—— 高科技点亮西游神话璀璨之路
  • 免费pdf转word软件,为你整理出8种方法,总有一个适合你
  • DRY原则-用函数和模块化来避免重复代码
  • 2024自动化测试面试真题(附答案)!