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