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. 为帮助别人少走弯路而写博客 ！！！
如果本篇文章帮到了你 不妨点个赞吧~ 我会很高兴的 😄 (^ ~ ^) 。想看更多 那就点个关注吧 我会尽力带来有趣的内容 😎。
如果你遇到了问题，自己没法解决，可以私信问我。
感谢订阅专栏 三连文章！！