在Vue中怎么实现打字机的效果

本篇内容介绍了“在Vue中怎么实现打字机的效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

最终效果

I‘m ByPunk!I‘m looking for a job.I‘m a front-end programmer.I‘m coding the web…

以上四句话循环重复，以打字机的效果显示输入和删除，因为前面的I‘m是相同的，所以只对后面的内容加以修改。

1.事先定义好字符串str：str='By Punk!'，使用数组的splite方法将str分解成由字母组成的数组。

2.利用for循环，每100毫秒向数组里push一个新的字母，利用vue的双向绑定，数据更新带动视图更新。

3.在容纳字母的div后写一个竖杠“|”并加上不断闪烁的动画，模拟打字机光标。

4.在每次push的时候，判断当前的索引i是否是数组的最后一个元素，如果是，则在2秒后开始清除。

5.“删除”具体实现跟“输入”刚好相反，每200毫秒从数组从pop出最后一项。

6.使用watch钩子函数实现四句话的循环重复。

具体代码如下

<template>     <div class="typer">       <div class="typer-content">         <p class="typer-static">I'm&nbsp;</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;            /*如果输入完毕，在2s后开始删除*/           if(i==L-1){              setTimeout(function(){               that.back();             },2000);           }       }     },   //擦掉(删除)字母     wipe(i){       return ()=>{           this.words.pop(this.letters[i]);           /*如果删除完毕，在300ms后开始输入*/           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中怎么实现打字机的效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！