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

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

news 2025/7/8 23:48:30

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

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2025/6/21 2:07:49

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/7/7 5:55:02

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2025/7/8 20:09:11

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2025/7/8 10:36:31

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/6/26 20:21:28

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2025/6/17 5:20:48

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/7/8 23:06:19

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2025/7/8 23:46:35

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

编程新知 2025/6/26 5:08:48

C++.OpenGL （14/64）多光源（Multiple Lights）

多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

编程新知 2025/6/11 3:15:20