vue3 <script setup> 语法糖时间组件

html 复制代码
<template>
  <div>
    <p>当前时间Current Time: {{ currentTime }}</p>
  </div>
</template>

<script setup>
import { ref, onBeforeUnmount, onMounted } from 'vue'

const currentTime = ref('')

let interval // 声明 interval 变量

const getToday = () => {
  const datas = new Date()
  const on2 = ' : '
  let onS = datas.getHours()
  let onF = datas.getMinutes()
  let onN = datas.getSeconds()

  if (onS >= 0 && onS <= 9) {
    onS = '0' + onS
  }
  if (onF >= 0 && onF <= 9) {
    onF = '0' + onF
  }
  if (onN >= 0 && onN <= 9) {
    onN = '0' + onN
  }

  currentTime.value = onS + on2 + onF + on2 + onN
}

onMounted(() => {
  interval = setInterval(() => {
    // 将 interval 赋值为 setInterval 的返回值
    getToday()
  }, 1000)
})

onBeforeUnmount(() => {
  clearInterval(interval) // 使用 clearInterval 清除 interval 计时器
})
</script>
<style scoped>
p {
  font-size: 30px;
  color: hsla(160, 100%, 37%, 1);
    text-shadow: 1px 1px 1px rgb(0, 0, 0);
}
</style>
相关推荐
markyankee1012 分钟前
使用 Vue 脚手架创建项目的完整指南
vue.js
南屿im3 分钟前
基于 Promise 封装 Ajax 请求:从 XMLHttpRequest 到现代化异步处理
前端·javascript
青松学前端3 分钟前
vue-2.7源码解读之初始化流程和响应式实现
前端·vue.js·前端框架
杨进军3 分钟前
前端线上问题的那些事儿
前端·javascript·前端框架
每天开心5 分钟前
深入探索 React Hooks: useState 与 useEffect 的力量 🌟
前端·javascript·ai编程
流星稍逝8 分钟前
Vue3 + Uniapp 图片压缩公共方法封装
前端·vue.js
受之以蒙8 分钟前
Rust & WASM 之 wasm-bindgen 基础:让 Rust 与 JavaScript 无缝对话
前端·笔记·rust
中微子9 分钟前
React Props 传值规范详解
前端·react.js
namehu9 分钟前
Taro 小程序 Video 组件 referrer-policy="origin" 属性失效排查记
前端·taro
卸任14 分钟前
性能优化大作战:React.memo 在可编辑列表中的奇效
前端·javascript·react.js