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

news2024/11/24 2:16:14

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毫秒显示一个字符  
    },