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

vue3学习：数字时钟遇到的两个问题

news 2025/7/6 18:04:51

在前端开发学习中，用JavaScript脚本写个数字时钟是很常见的案例，也没什么难度。今天有时间，于是就用Vue的方式来实现这个功能。原本以为是件非常容易的事，没想到却卡在两个问题上，一个问题通过别人的博文已经找到答案，还有一个问题却还是不知道是什么原因造成的。

问题一 this指向的问题

mounted() {var _this = this;setInterval(function () {_this.today = new Date()}, 1000)
}

在上面这段代码中，我开始不太理解为什么要把 _this = this，感觉有点多此一举。于是便把这行代码弃了，直接用this，结果程序不能正常执行了。我知道是this的原因，但是个中具体的缘由却说不明白。
后来在网上看到一篇博文，把这个问题三言两语就说明白了，非常感谢博主的分享。
我们要获取vue变量或方法的时候，一般使用this，但是在回调函数中，this指向的就不是vue变量，而是回调函数本身，所以在一开始的时候，先定义_this=this，这样在任何位置都可以用_this来获取vue变量或方法。
也就是说，回调函数外的this指的是Vue对象，回调函数内的this默认是指向回调函数了，两者不相同，这样_this = this就不难理解了。

问题2 格式化时、分、秒的时候，用了三目运算符，分成两行写,程序可以正常运行，合成一行写就是undefined。

（1）分成两行写，正常运行，代码如下，效果如图。

 var second = this.today.getSeconds() second = second < 10 ? '0' + second : second

在这里插入图片描述
（2）合成一行写，显示undefined,代码如下，效果如下图。

var second = this.today.getSeconds() < 10 ? '0' + second : second

在这里插入图片描述

试了一下，在javaScript中也是这样的，我不清楚是什么原因造成的,是我的代码有错误吗？或者三目运算符有什么要求？

补充：

昨天在三目运算符这里，测试了半天没有找到原因，今天又试了试，发现之前的写法果然是错误的，显示“undefined”的原因终于找到了。正确的写法如下：

    var second =(second = this.today.getSeconds()) < 10 ? '0' + second : second

括号内是先声明变量并赋值，(second = this.today.getSeconds())，赋值运算符优先级较低，需要加括号。

用一行写结构比较复杂，还不好理解，不如分成两行写呢。
完整代码如下：

<!DOCTYPE html>
<html>
<head><title>实时显示的日期和时间</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app">{{message}}<sub-component v-if="show"></sub-component><button @click="change">切换</button></div><template id="displayTime"><div>{{dispTime() }}</div></template>
</body>
<script type="text/javascript">const SubComponent = {template:'#displayTime',data() {return {today: new Date(),}},methods: {dispTime() {var year = this.today.getFullYear()var month = this.today.getMonth() + 1var date = this.today.getDate()var hour = this.today.getHours()hour = hour < 10 ? '0' + hour : hourvar minute = this.today.getMinutes();minute = minute < 10 ? '0' + minute : minute// var second = this.today.getSeconds() // second = second < 10 ? '0' + second : secondvar second = this.today.getSeconds() < 10 ? '0' + second : secondreturn `${year}年${month}月${date}日${hour}:${minute}:${second}`}},mounted() {var _this = this;var timer = setInterval(function () {_this.today = new Date()}, 1000)},//实例销毁之前调用beforeUnmount() {if (this.timer) {clearInterval(this.timer); //在Vue实例销毁前清除定时器}console.log('清除时钟')}}const RootComponent={data() {return {message: '数字时钟',show: true,}},methods: {change() {this.show = !this.show}},components:{SubComponent,}}const vueApp = Vue.createApp(RootComponent)vueApp.mount("#app")
</script>
</html>

相关文章：

vue3学习：数字时钟遇到的两个问题

在前端开发学习中&#xff0c;用JavaScript脚本写个数字时钟是很常见的案例&#xff0c;也没什么难度。今天有时间&#xff0c;于是就用Vue的方式来实现这个功能。原本以为是件非常容易的事&#xff0c;没想到却卡在两个问题上&#xff0c;一个问题通过别人的博文已经找到答案&…...

编程日记 2024/10/16 18:40:00

吴恩达深度学习笔记：卷积神经网络（Foundations of Convolutional Neural Networks）3.7-3.8

目录 第四门课 卷积神经网络&#xff08;Convolutional Neural Networks&#xff09;第三周 目标检测&#xff08;Object detection&#xff09;3.7 非极大值抑制&#xff08;Non-max suppression&#xff09;3.8 Anchor Boxes 第四门课 卷积神经网络&#xff08;Convolutional…...

编程日记 2024/10/16 18:38:58

【Linux】最基本的字符设备驱动

前面我们介绍到怎么编译出内核模块.ko文件&#xff0c;然后还加载了这个驱动模块。但是&#xff0c;那个驱动代码还不完善&#xff0c;驱动写好后怎么在应用层使用也没有介绍。 字符设备抽象 Linux内核中将字符设备抽象成一个具体的数据结构&#xff08;struct cdev&#xff…...

编程日记 2024/10/16 18:37:57

利用 Llama 3.1模型 + Dify开源LLM应用开发平台，在你的Windows环境中搭建一套AI工作流

文章目录 1. 什么是Ollama&#xff1f;2. 什么是Dify&#xff1f;3. 下载Ollama4. 安装Ollama5. Ollama Model library模型库6. 本地部署Llama 3.1模型7. 安装Docker Desktop8. 使用Docker-Compose部署Dify9. 注册Dify账号10. 集成本地部署的 Llama 3.1模型11. 集成智谱AI大模型…...

编程日记 2024/10/16 18:35:56

Docker常用命令分享二

docker的用户组管理过程&#xff1a; 1、sudo : 可以让普通用户临时获得root用户的权限&#xff0c;来新建docker用户组 2、普通用户并没有使用sudo的权限 3、先要让root用户把testing用户加入到sudoers的授权文件中 4、sudoers的文件居然是只读的&#xff0c;先解决这个问…...

编程日记 2024/10/16 18:34:55

【一步步开发AI运动小程序】二十、AI运动小程序如何适配相机全屏模式？

引言 受小程序camera组件预览和抽帧图像不一致的特性影响&#xff0c;一直未全功能支持全屏模式&#xff0c;详见本系列文件第四节小程序如何抽帧&#xff1b;随着插件在云上赛事、健身锻炼、AI体测、AR互动场景的深入应用&#xff0c;各开发者迫切的希望能在全屏模式下应用&am…...

编程日记 2024/10/16 18:32:52

[Java基础] 运算符

[Java基础] 基本数据类型 [Java基础] Java HashMap 的数据结构和底层原理 目录 算术运算符 比较运算符 逻辑运算符 位运算符 赋值运算符 其他运算符 常见面试题 Java语言支持哪些类型的运算符&#xff1f; 请解释逻辑运算符&&和&的区别? 请解释条件运…...

编程日记 2024/10/16 18:28:46

[001-02-018].第05节：数据类型及类型转换

我的后端学习大纲 我的Java学习大纲 1、数据类型介绍&#xff1a; 1.0.计算机存储单位&#xff1a; 1.1.基本数据类型介绍&#xff1a; a.整型&#xff1a;byte、short、int、long 1.整型包括&#xff1a;byte、short、int、long&#xff0c;可如下图方式类比记忆&#xff1…...

编程日记 2024/10/16 18:25:43

Netty基础

Netty基础 一级目录I/O请求基础知识Netty如何实现自己的I/O模型 网络框架的选型 Netty整体架构Netty逻辑处理架构网络通信层事件调度层服务编排层 组件关系梳理Netty源码结构 netty是目前最流行的一款高性能java网络编程框架&#xff0c;广泛使用于中间件、直播、社交、游戏等领…...

编程日记 2024/10/16 18:19:36

602，好友申请二：谁有最多的好友

好友申请二&#xff1a;谁有最多的好友 实现 with tmp as (selectrequester_id idfrom RequestAcceptedunion allselectaccepter_id idfrom RequestAccepted )selectid,count(*) num from tmp group by id order by num desc limit 1;...

编程日记 2024/10/16 18:18:35

【Matlab算法MATLAB实现的音频信号时频分析与可视化（附MATLAB完整代码）

MATLAB实现的音频信号时频分析与可视化 前言正文：时频分析实现原理代码实现代码运行结果图及说明结果图：结果说明：总结前言 音频信号的时频分析是信号处理领域中的一个重要研究方向。它允许我们同时观察信号在时间和频率域的特性，为音频处理、语音识别、音乐分析等应用提供…...

编程日记 2024/10/16 18:14:31

界面耻辱纪念堂--可视元素03

更多的迹象表明&#xff0c;关于在程序里使用新的动态界面元素&#xff0c;微软的态度是不确定的&#xff0c;其中一个是仅仅需要对比一下Office97 里的“Coolbars”和“标准工具条”。Coolbar 按钮直到用户指针通过的时候才成为按钮&#xff08;否则是平的&#xff09;。 工具…...

编程日记 2024/10/16 18:13:31

国产龙芯处理器选择迅为2K1000开发板有资料

硬件配置国产龙芯处理器&#xff0c;双核64位系统&#xff0c;板载2G DDR3内存&#xff0c;流畅运行Busybox、Buildroot、Loognix、QT5.12 系统!接口全板载4路USB HOST、2路千兆以太网、2路UART、2路CAN总线、Mini PCIE、SATA固态盘接口、4G接口、GPS接口WIF1、蓝牙、Mini HDMI…...

编程日记 2024/10/16 18:12:29

MySQL 命令（持续更新）

将 MySQL 命令结果输出到文件中 通过 k8s MySQL pod 里的客户端连接到 MySQL 服务器 kubectl exec mysql-pod -- mysql -hx.x.x.x -uroot -proot -e SELECT * FROM db.table; > result.txt通过 k8s MySQL pod 的客户端连接 MySQL 服务器&#xff0c;直接进入到 MySQL 客户端…...

编程日记 2024/10/16 18:11:28

Linux下Docker方式Jenkins安装和配置

一、下载&安装 Jenkins官方Docker仓库地址&#xff1a;https://hub.docker.com/r/jenkins/jenkins 从官网上可以看到&#xff0c;当前最新的稳定版本是 jenkins/jenkins:lts-jdk17。建议下在新的&#xff0c;后面依赖下不来 所以&#xff0c;我们这里&#xff0c;执行doc…...

编程日记 2024/10/16 18:10:27

低代码框架参考

企业管理信息系统作为一类重要的应用软件系统&#xff0c;具有自己的特点&#xff0c;主要有两个方面&#xff1a; 1. 系统规模大&#xff0c;目前市场上常见的ERP系统一般都有几千个页面。 2. 页面逻辑相似性强。经过比较可以发现&#xff0c;大部分页面具有类似的功能&…...

编程日记 2024/10/16 18:08:25

2024 年 9 月区块链游戏研报：行业回暖，Telegram 游戏引发热潮

作者&#xff1a;Stella L (stellafootprint.network) 数据来源&#xff1a;Footprint Analytics Games Research Page 9 月份&#xff0c;区块链游戏代币的市场总值增长了 29.2%&#xff0c;达到 232 亿美元&#xff0c;日活跃用户&#xff08;DAU&#xff09;数量上升了 1…...

编程日记 2024/10/16 18:07:24

python爬虫登录校验之滑块验证、图形验证码（OCR）

在爬虫过程中&#xff0c;验证码和滑块验证是常见的反爬措施。针对这些挑战&#xff0c;通常采用OCR识别图形验证码和模拟滑块拖动来处理滑块验证。以下是如何处理这两种类型验证的详细方法。 1. 图形验证码&#xff08;OCR&#xff09; a. 使用 tesserocr 和 Pillow 处理图形…...

编程日记 2024/10/16 18:06:23

（一）Python程序结构

1、Python写模块 使用缩进分层来写模块&#xff1b; 2、缩进规范 最好使用同一种缩进方式&#xff0c;统一使用tab或者空格键&#xff1b; 3、换行符&#xff1a;\n&#xff1b; print("窗前明月光\n疑似地上霜") 4、续行符号&#xff1a;\&#xff1b; 注意1…...

编程日记 2024/10/16 18:05:21

二叉树——相同的树

还是应用递归的思想&#xff0c;将这个问题拆分为三个部分&#xff0c;第一&#xff1a;当两棵树均为空树&#xff0c;或者访问到最后的子树时均为空树时&#xff0c;则返回true。第二&#xff1a;当两棵树中其中一棵树为空树&#xff0c;另一棵树不是空树&#xff0c;证明两棵…...

编程日记 2024/10/16 18:03:19

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2025/7/6 7:15:21

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/6/19 4:37:30

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

编程新知 2025/7/5 11:14:45

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/7/5 11:09:46

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/7/6 6:06:39

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

编程新知 2025/7/5 10:43:25

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2025/7/4 5:47:52

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2025/6/24 15:42:17

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2025/6/26 10:09:03

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2025/7/6 14:32:21