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

news/2024/12/21 22:37:14/

目录

Blue留言:

效果图:

实现思路:

代码:

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

2、vue的插值表达式

3、函数

4、mounted()函数调用

结语:


Blue留言:

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

 大佬给的回复:

 

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

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

效果图:

实现思路:

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

代码:

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

2、vue的插值表达式

3、函数

javascript"> 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. 为帮助别人少走弯路而写博客 !!!

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

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

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


http://www.ppmy.cn/news/1534643.html

相关文章

在C#中使用Redis实现高效消息队列

使用Redis实现C#中的消息队列 Redis是一种开源的内存数据结构存储系统,因其高性能和灵活性被广泛用于缓存、数据库和消息队列等场景。本文将详细介绍如何在C#中使用Redis实现一个简单的消息队列,涵盖环境准备、代码实现和使用示例。 1. 环境准备 1.1 安装Redis 首先,确保…

Linux驱动开发(速记版)--设备树插件

第六十八章 设备树插件介绍 Linux 4.4之后引入了动态设备树&#xff0c;其中的设备树插件&#xff08;Device Tree Overlay&#xff09;是一种扩展机制&#xff0c;允许在运行时动态添加、修改或删除设备节点和属性。 设备树插件机制通过DTS&#xff08;设备树源文件&#xff0…

C# Windows EventHandler事件的使用

在实现项目中有这样一个使用场景&#xff0c;在一个独立的类库中&#xff0c;它没有对其他类库的引用。所以它能调用的资源有限。这时想在这个类库的一个窗体中的一个按钮要实现一个功能时就会发现有很多要调用的资源没有&#xff0c;无法实现业务逻辑。这时怎么办&#xff1f;…

什么是 Angular 开发中的 Dumb components

Dumb components&#xff0c;在 Angular 开发中也被称为 Presentational components&#xff0c;它们的主要职责是通过展示数据和触发事件&#xff0c;把业务逻辑和 UI 表现分离开来。Dumb components 只通过 Input() 接收数据&#xff0c;Output() 向外发送事件&#xff0c;不…

Julia的安装和使用(附vscode中使用)

一、安装Julia 1.打开清华大学镜像网站 2.按照下面的路径找到zip并下载:(x64指的是64位操作系统&#xff0c;可以自行选择适配的) /julia-releases/bin/winnt/x64/1.9/ 3.解压后进入\julia-1.9.4-win64\julia-1.9.4\bin文件夹下&#xff0c;julia.exe即是可执行文件。 4.复制…

OpenCV视频I/O(8)视频采集类VideoCapture之从视频源中读取一帧图像函数read()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 抓取、解码并返回下一个视频帧。 cv::VideoCapture::read() 是 VideoCapture 类的一个成员函数&#xff0c;用于从视频源中读取一帧图像. 该方法…

一次解决Go编译问题的经过

用Go语言编写了一个小的项目&#xff0c;项目开发环境是在本地的Windows环境中&#xff0c;一切单元测试和集成测试通过后&#xff0c;计划将项目部署到VPS服务器上自动运行&#xff0c;但在服务器上执行go run运行时&#xff0c;程序没有任何响应和回显&#xff0c;甚至main函…

linux第二课:常用命令

Kali Linux&#xff0c;黑客必备神器。跟着我&#xff0c;带你从入门到入狱&#xff01; 第二课&#xff0c;常用命令。 1.whoami 翻译为中文&#xff1a;我是谁 用途&#xff1a;输出现在自己的用户身份(用户名) 参数&#xff1a;无参数 好吧&#xff0c;这透明度一调都不…