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

本篇内容介绍了“在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&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;                     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中怎么实现打字机的效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！