本篇内容介绍了“在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 </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中怎么实现打字机的效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
