<template>
<div>{{ text }}</div>
<template>
<script>
export default {
data() {
return {
initialText: '这是一个打字教程打字教程这是一个打字教程打字教程这是一个打字教程打字教程这是一个打字教程打字教程这是一个打字教程打字教程这是一个打字教程打字教程',
index: 0,
text: ''
}
},
mounted() {
const a = setInterval(() => {
this.autoTyping()
if(this.text.length===this.initialText.length){
clearInterval(a)
}
}, 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>
vue模仿打字效果
最新推荐文章于 2024-07-09 11:50:34 发布