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

<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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/843524.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

反射、类加载、静态代理,jdk动态代理,cglib代理

一、 反射 反射是在程序运行状态下&#xff0c;动态获取类的结构&#xff08;属性&#xff0c;构造器&#xff0c;方法&#xff0c;注解&#xff09;&#xff0c;动态的创建类对象然后调用类中的属性方法。反射的起源Class&#xff0c;Class中包含类反射要使用的API 获取Class的…

java项目级云MES源码(制造执行系统) springboot + vue-element-plus-admin生产制造业MES系统源码

java项目级云MES源码&#xff08;制造执行系统) springboot vue-element-plus-admin生产制造业MES系统源码 MES系统通过信息传递对从订单下达到产品完成的整个生产过程进行优化管理。当工厂发生实时事件时&#xff0c;MES制造执行系统功能的发挥重点体现在及时做出反应、报告&…

期权成交量太小卖不出去怎么办?

今天期权懂带你了解期权成交量太小卖不出去怎么办&#xff1f;在期权交易的世界里&#xff0c;成交量是一个至关重要的指标&#xff0c;它犹如行情的晴雨表&#xff0c;反映着市场的活跃程度。 期权成交量太小卖不出去怎么办&#xff1f; 耐心等待&#xff1a;如果期权合约的流…

图计算与ID-Mapping

目录 一、图计算&#xff1a; 图计算起源&#xff1a; 图计算特点&#xff1a; 图计算的应用&#xff1a; Spark GraphX图处理库 ID-Mapping 二、总结&#xff1a; 一、图计算&#xff1a; 图&#xff08;Graph&#xff09;是用于表示对象之间关联关系的一种抽象数据结构…

Java面试八股之对threadLocal是怎么理解的

对threadLocal是怎么理解的 概念与特点&#xff1a;ThreadLocal是Java提供的一个类&#xff0c;它允许你创建线程局部变量。每个线程都拥有自己的ThreadLocal变量副本&#xff0c;彼此之间互不影响&#xff0c;实现了变量在线程间的隔离。这意味着&#xff0c;即使多个线程使用…

深入理解MySQL索引下推优化

在MySQL中&#xff0c;索引的使用对于查询性能至关重要。然而&#xff0c;即使有合适的索引&#xff0c;有时查询性能仍然不尽如人意。索引下推&#xff08;Index Condition Pushdown&#xff0c;ICP&#xff09;是一项能够进一步优化查询性能的技术。本文将详细讲解索引下推的…

【Linux】权限的理解之权限掩码(umask)

目录 前言 一、利用八进制数值表示文件或目录的权限属性 二、系统默认的权限掩码和权限掩码的作用原理 三、分析权限掩码改变文件或目录的权限属性 前言 权限掩码是由4个数字组合而成的&#xff0c;默认的第一位数字是0&#xff1b;后三位数字分别由八进制位数字组成。权限…

【JVM精通之路】垃圾回收-三色标记算法

首先预期你已经基本了解垃圾回收的相关知识&#xff0c;包括新生代垃圾回收器&#xff0c;老年代垃圾回收器&#xff0c;以及他们的算法&#xff0c;可达性分析等等。 先想象一个场景 最开始黑色节点是GC-Roots的根节点&#xff0c;这些对象有这样的特点因此被选为垃圾回收的根…

Transformers x SwanLab:可视化NLP模型训练

HuggingFace 的 Transformers 是目前最流行的深度学习训框架之一&#xff08;100k Star&#xff09;&#xff0c;现在主流的大语言模型&#xff08;LLaMa系列、Qwen系列、ChatGLM系列等&#xff09;、自然语言处理模型&#xff08;Bert系列&#xff09;等&#xff0c;都在使用T…

Mowgli用于配对多组学整合

对同一组细胞的多个分子层进行分析逐渐流行。越来越需要能够联合分析这些数据的多视图学习方法。Mowgli是一种支持配对多组学数据的整合方法。值得注意的是&#xff0c;Mowgli将非负矩阵分解和最优传输相结合&#xff0c;同时提高了非负矩阵分解的聚类性能和可解释性。作者将Mo…

android studion 一直编译失败

无外网&#xff0c;无法下载对应的库导致编译失败 配置代理 1.修改镜像源 资源路径 为国内镜像 如下为国美腾讯软件镜像 distributionUrlhttps\://mirrors.cloud.tencent.com/gradle/gradle-8.6-bin.zip 2.构建仓储失败 无法下载。 添加国内仓储如下位置&#xff0c;重新…

SAP MM模块后台配置(下)

3.10 采购订单的审批过程 配置路径 IMG->物料管理-采购-采购订单-审批过程-含分类的过程 事务代码 SPRO 配置请求号 配置描述:我们用这个配置来进行九牧集团用到的采购订单的审批策略的定义: 配置屏幕: …

Jmeter元件及基本作用域

&#x1f680;从今天开始学习性能测试工具——Jmeter&#xff0c;小梦也是先学习了下Jmeter的元件概念以及其基本的作用域&#xff0c;整理了下笔记&#xff0c;希望不管是从事开发领域还是测试领域的朋友们&#xff0c;我们一起学习下Jmeter工具&#xff0c;提升工作中的技能&…

【软考】下篇 第12章 信息系统架构设计理论与实践

目录 一、信息系统架构的定义二、信息系统架构风格三、信息系统架构分类四、信息系统常用的4种架构模型&#xff08;SCSB&#xff09;五、企业信息系统的总体框架ISA六、TOGAF & ADM七、信息化总体架构方法信息化六要素信息化架构模式信息系统生命周期&#xff08;规分设实…

7个靠谱的副业赚钱方法,宝妈,上班族,学生党可以做的兼职副业

你是否也曾面临过这样的困境&#xff1a;生活费紧张&#xff0c;想要找份兼职来补贴家用或是满足自己的小心愿&#xff1f;别担心&#xff0c;今天我将带领你踏入这个丰富多彩的兼职世界&#xff0c;助你轻松达成月入过千的小目标&#xff01; 在我漫长的兼职探索旅程中&#…

【区域脑图论文笔记】BrainNetCNN:第一个专门为脑网络连接体数据设计的深度学习框架

【区域脑图论文笔记】BrainNetCNN&#xff1a;第一个专门为脑网络连接体数据设计的深度学习框架 信息概览与提炼采用的数据与结果数据集结果概览一眼 重点图与方法概览核心与优劣总结模型与实验论文方法E2E的理解E2N的理解N2G的理解三个卷积层设计的理解 论文实验与讨论 总结与…

力扣232. 用栈实现队列(两栈实现队列)

Problem: 232. 用栈实现队列 文章目录 题目描述思路Code 题目描述 思路 利用两个栈&#xff0c;一个入栈一个出栈搭配着实现队列的相关操作&#xff1a; 1.创建两个栈stack1和stack2&#xff1b; 2.void push(int x):将要入队的元素先入栈stack1&#xff1b; 3.int pop()&…

倒计时 1 天!「飞天技术沙龙-CentOS 迁移替换专场」演讲亮点一览

各位开发者们&#xff1a; 「飞天技术沙龙 - CentOS 迁移替换专场」即将于本周三在北京召开&#xff01;昨天&#xff0c;小龙为参会者公布了详细参会指南&#xff0c;今天带大家了解各演讲内容亮点。 活动时间&#xff1a;5 月 29 日&#xff08;本周三&#xff09; 13:30-17…

pod容器基础概念

一 Pod基础概念&#xff1a; ①Pod是kubernetes中最小的资源管理组件&#xff0c;Pod也是最小化运行容器化应用的资源对象。一个 Pod代表着集群中运行的一个进程。一个pod包含一个或多个容器。如&#xff1a;应用容器/业务容器&#xff08;淘 宝、京东、拼多多后台&#xff…

水电自动抄表系统是什么?

1.简述&#xff1a;水电自动抄表系统 水电自动抄表系统是一种现代化计量检定解决方法&#xff0c;为提升公用事业服务项目的效率和精确性。传统式手动抄水表方法已经被这类高效率、精准的自动化系统所替代&#xff0c;它能够实时、远程控制地收集解决水电使用数据。 2.系统原…