代码介绍(其实就是通过字符串截取加定时拼接完成的,我相信有时间都能琢磨出来,来这里就是为了省事)
上vue页面代码:
<template>
<div id='App'>
<h2>{{text}}<span ref="fou" class="fousdis">{{'_'}}</span></h2>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
initialText: '这是一个打字教程打字教程,。,。,777',
index: 0,
text: ''
}
},
mounted() {
setInterval(() => {
this.autoTyping()
var tim = setInterval(() => {
this.$refs.fou.classList.toggle('fousdis')
if (this.index === this.text.length) {
clearInterval(tim)
}
}, 150)
}, 300)
},
methods: {
autoTyping() {
this.index++
this.text = this.initialText.slice(0, this.index)
// this.index = this.text.length === this.initialText.length ? 0 : this.index //实现循环打字
}
}
}
</script>
<style >
.fousdis{
display: none;
}
</style>
老规矩:复制粘贴那去看效果