本篇内容介绍了“在Vue中怎么实现打字机的效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
最终效果
I‘m ByPunk!I‘m looking for a job.I‘m a front-end programmer.I‘m coding the web…
以上四句话循环重复，以打字机的效果显示输入和删除，因为前面的I‘m是相同的，所以只对后面的内容加以修改。
事先定义好字符串str：str='By Punk!'，使用数组的splite方法将str分解成由字母组成的数组。
利用for循环，每100毫秒向数组里push一个新的字母，利用vue的双向绑定，数据更新带动视图更新。
在容纳字母的div后写一个竖杠“|”并加上不断闪烁的动画，模拟打字机光标。
在每次push的时候，判断当前的索引i是否是数组的最后一个元素，如果是，则在2秒后开始清除。
“删除”具体实现跟“输入”刚好相反，每200毫秒从数组从pop出最后一项。
使用watch钩子函数实现四句话的循环重复。
具体代码如下
<template> <div class="typer"> <div class="typer-content"> <p class="typer-static">I'm </p> <!-- 动态变化的内容--> <p class="typer-dynamic"> <span class="cut"> <span class="word" v-for="(letter,index) in words" :key="index">{{letter}}</span> </span> <!-- 模拟光标--> <span class="typer-cursor"></span> </p> </div> </div></template><script>export default { data () { return { words:[], //字母数组push，pop的载体 str:"By Punk", //str初始化 letters:[], //str分解后的字母数组 order:1, //表示当前是第几句话 } }, watch:{ //监听order值的变化，改变str的内容 order(old,newV){ if(this.order%4==1){ this.str="By Punk!" } else if(this.order%4==2){ this.str="looking for a job. " } else if(this.order%4==3){ this.str="a front-end programmer." } else{ this.str="coding the web..." } } }, mounted(){ //页面初次加载后调用begin()开始动画 this.begin() }, methods:{ //开始输入的效果动画 begin(){ this.letters=this.str.split("") for(var i=0;i<this.letters.length;i++){ setTimeout(this.write(i),i*100); } }, //开始删除的效果动画 back(){ let L=this.letters.length; for(var i=0;i<L;i++){ setTimeout(this.wipe(i),i*50); } }, //输入字母 write(i){ return ()=>{ let L=this.letters.length; this.words.push(this.letters[i]); let that=this; if(i==L-1){ setTimeout(function(){ that.back(); },2000); } } }, //擦掉(删除)字母 wipe(i){ return ()=>{ this.words.pop(this.letters[i]); if(this.words.length==0){ this.order++; let that=this; setTimeout(function(){ that.begin(); },300); } } }, },}</script><style scoped lang="less">@thePink:#e84d49;.typer{ margin-top: 2%; box-sizing: border-box;}.typer .typer-content{ font-weight: bold; font-size: 50px; display: flex; flex-direction: row; letter-spacing: 2px }.typer-dynamic{ position: relative;}.cut{ color: @thePink;}.typer-cursor{ position: absolute; height: 100%; width: 3px; top: 0; right: -10px; background-color: @thePink; animation: flash 1.5s linear infinite;}</style>“在Vue中怎么实现打字机的效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
