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

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

news 2026/2/9 2:41:48

在前端开发学习中，用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

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/9/30 16:39:11

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/11/11 6:28:42

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

编程新知 2025/12/19 20:46:15

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2026/2/5 6:28:09

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2026/1/23 10:51:19

Linux 内存管理实战精讲：核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

编程新知 2026/1/25 10:16:57

掌握 HTTP 请求：理解 cURL GET 语法

cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

编程新知 2025/7/9 20:52:19

C++--string的模拟实现

一,引言 string的模拟实现是只对string对象中给的主要功能经行模拟实现&#xff0c;其目的是加强对string的底层了解&#xff0c;以便于在以后的学习或者工作中更加熟练的使用string。本文中的代码仅供参考并不唯一。 二,默认成员函数 string主要有三个成员变量&#xff0c;…...

编程新知 2026/1/26 19:02:17