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

Vue2如何在网页实现文字的逐个显现

目录

Blue留言:

效果图:

实现思路:

代码:

1、空字符串与需渲染的字符串的定义

2、vue的插值表达式

3、函数

4、mounted()函数调用

结语:


Blue留言:

在国庆前夕,突发奇想,我想自己给自己做一个个人博客网站,但是我个人时间实在是太有限了,自己还有竞赛没完成,考研也在准备,怕不太好,就去自己的微信群里面问了问里面的大佬们。

 大佬给的回复:

 

既然如此,为了更加坚定我做网站的信念(因为我太懒了,上一个留的vue组件库的坑我都还没填,好像代码我都删了😂),我就让一些不太会技术的同班同学组一个队伍。然后以这个个人博客管理系统为题目,去打竞赛,这样我就算不想做了,也得管他们,不得不做。(算是背水一战?(@_@;))

 那么国庆我就抽了点时间开始写了,反正比赛也挺早的,在下一年的4月左右吧,也可以慢慢摸鱼了。好了废话不多说了,开始说正题,这篇博客写的是我写网站的时候,用到的一个思路,在网页实现文字的逐个显现,我们来看效果图。

效果图:

实现思路:

实际上思路很简单,在vue2中,我们定义两个字符串,一个字符串A为我们需要渲染在网页上的文字,一个字符串B为空字符串。然后将空字符串B的这个变量利用vue2的一个特性{{变量B}}(插值表达式),嵌入进代码中,写一个函数,这个函数的功能是将字符串中A中的每一个字符,取出来,追加到空字符串B中,至于时间的把控,我们可以用定时器来处理,设置自己想要的时间,然后每过多少秒执行一次追加。最后在mounted()函数中,我们去调用它!!

代码:

1、空字符串与需渲染的字符串的定义

2、vue的插值表达式

3、函数

 showText() {const interval = setInterval(() => {  if (this.index < this.fullText.length) {  this.displayedText += this.fullText[this.index];  this.index++;  } else {  this.index = 0 // 清除定时器  this.displayedText=''}  }, 300); // 每300毫秒显示一个字符  },

4、mounted()函数调用

结语:

等我写完了这个网页,比完赛了,就开源出来,虽然写的很史,但我还是不要脸的去展现自己了。 


你好,我是Blue. 为帮助别人少走弯路而写博客 !!!

如果本篇文章帮到了你 不妨点个赞吧~ 我会很高兴的 😄 (^ ~ ^) 。想看更多 那就点个关注吧 我会尽力带来有趣的内容 😎。

如果你遇到了问题,自己没法解决,可以私信问我。

感谢订阅专栏 三连文章!!

相关文章:

Vue2如何在网页实现文字的逐个显现

目录 Blue留言&#xff1a; 效果图&#xff1a; 实现思路&#xff1a; 代码&#xff1a; 1、空字符串与需渲染的字符串的定义 2、vue的插值表达式 3、函数 4、mounted()函数调用 结语&#xff1a; Blue留言&#xff1a; 在国庆前夕&#xff0c;突发奇想&#xff0c;我想…...

mybatisplus的查询,分页查询,自定义多表查询,修改的几种写法

使用mybatisplus的Db类简化写法 使用静态调用的方式&#xff0c;执行CRUD方法&#xff0c;避免Spring环境下Service循环注入、简洁代码&#xff0c;提升效率需要项目中已注入对应实体的BaseMapper完整使用方式见官方测试用例&#xff1a;官方测试用例地址对于参数为Wrapper的&…...

括号匹配判断

本题实现求表达式中括号是否匹配。只需判断表达式中括号&#xff08;本题中只会出现三种括号&#xff0c;分别是小括号&#xff0c;中括号和大括号&#xff09;是否匹配&#xff0c;表达式中可以有其他值也可没有。 函数接口定义&#xff1a; int match (char *exp); 其中 …...

数据结构(栈和队列的实现)

1. 栈&#xff08;Stack&#xff09; 1.1 栈的概念与结构 栈是一种特殊的线性表&#xff0c;其只允许固定的一段插入和删除操作&#xff1b;进行数据插入和删除的一段叫做栈顶&#xff0c;另一端叫栈底&#xff1b;栈中的元素符合后进先出LIFO&#xff08;Last In First Out&…...

Python批量处理客户明细表格数据,挖掘更大价值

批量处理 .xls 数据并进行归类分析以挖掘内在价值&#xff0c;通常涉及以下步骤&#xff1a; 读取数据&#xff1a;使用 pandas 库读取 .xls 文件。数据清洗&#xff1a;处理缺失值、异常值、重复值等。数据转换&#xff1a;对数据进行必要的转换&#xff0c;如日期格式统一、…...

NAND Flash虚拟层索引表机制

​​​​​ NAND Flash虚拟层的索引表用于建立逻辑块与数据块、日志块之间的关系,用于NAND Flash虚拟层在运行过程中的读写、擦除操作;由于NAND Flash虚拟层采用集中索引的方式,因此在NAND Flash虚拟层启动时需要在NAND Flash存放索引表区域扫描并确定NAND Flash中存…...

Spring Boot框架:新闻推荐系统开发新趋势

3系统分析 3.1可行性分析 通过对本新闻推荐系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本新闻推荐系统采用JAVA作为开发语言&#xff0c;Spring Boot框…...

RK3568平台(opencv篇)opencv处理图像

一.颜色转换 cv2.cvtColor()函数功能: 将一幅图像从一个色彩空间转换到另一个色彩空间。 函数原型: cv2.cvtColor(src,code,dst=None,dstCn=None) 参数定义: src:要转换的源文件 code,转换的色彩空间,在 opencv 中有超过 150 种颜色空间转换方法,但是经常用的只有 B…...

【移动端】Viewport 视口

1. 什么是 Viewport&#xff08;视口&#xff09;&#xff1f; Viewport&#xff08;视口&#xff09;是指浏览器中用户可见的那部分网页内容的区域&#xff0c;简单来说&#xff0c;它是用户当前看到的网页的“窗口”区域。在不同的设备上&#xff0c;Viewport 的大小会有所不…...

PWM 模式

一、介绍 PWM&#xff08;脉宽调制&#xff0c;Pulse-width modulation&#xff09;是一种通过调节脉冲信号的宽度来控制电能输出的方法。PWM是一种方波信号&#xff0c;通常在电子和电气工程中用于调节功率输送&#xff0c;控制电机速度&#xff0c;调节LED亮度&#xff0c;以…...

模拟算法(3)_Z字形变换

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 模拟算法(3)_Z字形变换 收录于专栏【经典算法练习】 本专栏旨在分享学习算法的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 1. 题目链…...

Go语言实现长连接并发框架 - 任务执行流路由模块

文章目录 前言接口结构体接口实现项目地址最后 前言 你好&#xff0c;我是醉墨居士&#xff0c;上篇博客中我们实现了任务执行流上下文部分&#xff0c;接下来我们实现一下任务执行流的路由模块&#xff0c;基于该模块可以实现将消息转发到相应注册的任务执行流中进行处理 接…...

Windows 编译 FFmpeg 源码详细教程

FFmpeg FFmpeg 是一个开源的多媒体框架,它包括了一整套工具和库,可以用来处理(转码、转换、录制、流式传输等)音频和视频。FFmpeg 支持广泛的音视频格式,并且可以在多种操作系统上运行,包括 Windows、Linux 和 macOS。 FFmpeg 的主要组件包括: ffmpeg:这是一个命令行工…...

JavaCV 实现视频链接截取封面工具

引入必要依赖 <!--JavaCV--> <dependency><groupId>org.bytedeco</groupId><artifactId>javacv-platform</artifactId><version>1.5.7</version> </dependency> <dependency><groupId>cn.hutool</groupI…...

初识Linux · 进程替换

目录 前言&#xff1a; 1 直接看代码和现象 2 解释原理 3 将代码改成多进程版本 4 认识所有函数并使用 前言&#xff1a; 由前面的章节学习&#xff0c;我们已经了解了进程状态&#xff0c;进程终止以及进程等待&#xff0c;今天&#xff0c;我们学习进程替换。进程替换我…...

项目-坦克大战学习-人机ai

我们要知道&#xff0c;人机的移动和玩家的移动方式是一样的&#xff0c;所以我们可以将玩家移动代码以及检测碰撞代码移过来&#xff0c;唯一不同的就是人机检测到碰撞后会改变方向继续移动而不是停止 所以我们需要一个随机数使人机检测到碰撞后随机修改方向 Random rd new …...

YOLOv11改进 | Conv篇 | YOLOv11引入SKConv

1. SKConv介绍 1.1 摘要:在标准卷积神经网络(CNN)中,每层中阿尔蒂神经元的感受野被设计为共享相同的大小。在神经科学界众所周知,视觉皮层神经元的感受野大小受到刺激的调制,这在构建CNN时很少考虑。我们在CNN中提出了一种动态选择机制,允许每个神经元根据输入信息的多…...

招联2025校招内推

【投递方式】 直接扫下方二维码&#xff0c;或点击内推官网https://wecruit.hotjob.cn/SU61025e262f9d247b98e0a2c2/mc/position/campus&#xff0c;使用内推码 igcefb 投递&#xff09; 【招聘岗位】 后台开发 前端开发 数据开发 数据运营 算法开发 技术运维 软件测试 产品策…...

美容院管理创新:SpringBoot系统设计与开发

摘 要 如今的信息时代&#xff0c;对信息的共享性&#xff0c;信息的流通性有着较高要求&#xff0c;因此传统管理方式就不适合。为了让美容院信息的管理模式进行升级&#xff0c;也为了更好的维护美容院信息&#xff0c;美容院管理系统的开发运用就显得很有必要。并且通过开发…...

文心一言 VS 讯飞星火 VS chatgpt (361)-- 算法导论24.3 3题

三、假定将 Dijkstra 算法的第4行改为&#xff1a; 4 while |Q|>1 这种改变将让 while 循环的执行次数从 ∣ V ∣ |V| ∣V∣ 次降低到 ∣ V ∣ − 1 |V|-1 ∣V∣−1 次。这样修改后的算法正确吗? 如果要写代码&#xff0c;请用go语言。 文心一言&#xff1a; 将 Dijkst…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

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

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

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...