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

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

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

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