Vue3-(十)Vue3实现打字机效果

本文最后更新于:April 30, 2022 pm

积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里,不积小流无以成江海。齐骥一跃,不能十步,驽马十驾,功不在舍。面对悬崖峭壁,一百年也看不出一条裂缝来,但用斧凿,能进一寸进一寸,能进一尺进一尺,不断积累,飞跃必来,突破随之。

目录

没有找到能够在Vue3中实现打字机效果的插件,都是在Vue2中实现效果的插件。

实现效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<p class='typewriter'>{{typewriter}}</p>


data () {
return {
typewriter: '',
i: 0,
timer: 0,
str: 'Hi, i´m a web Designer'
}
}


mounted () {
this.typeing()
},
methods: {
typeing () {
if (this.i <= this.str.length) {
this.typewriter = this.str.slice(0, this.i++) + '_'
this.timer = setTimeout(() => {
this.typeing()
}, 100)
} else {
clearTimeout(this.timer)
}
}
}

提示:不一定非要使用P标签,只要加上class即可。如果需要改变打字的速度,可以减少时间(100)。