vue2实现for循环的div显示打字机效果

<template>
  <div id="app">
    <div v-for="item,idnex in  typedText" :key="idnex">
      <div><span>{{item.type}}</span>{{item.text}}</div>
    </div>
  </div>
</template>
 
<script>
  export default {
    data() {
      return {
        originalText: [
          {
            type: '1',
            text: '这是一段示例文本，将通过打字机效果逐个显示出来1。',
          },
          {
            type: '2',
            text: '这是一段示例文本，将通过打字机效果逐个显示出来2。',
          },
          {
            type: '3',
            text: '这是一段示例文本，将通过打字机效果逐个显示出来3。',
          },
          {
            type: '4',
            text: '这是一段示例文本，将通过打字机效果逐个显示出来4。',
          },
        ],
        typedText: [],
        typingInterval: 50, // 打字速度，单位毫秒
        isTyping: false,
        index: 0,
        ind: 0,
        timer: null,
      }
    },
    mounted() {
      this.copyTect()
    },
    methods: {
      copyTect() {
        // 解构需要渲染的数组应为是复杂数组所以吧type单独提取出来赋值
        const item = this.originalText[this.ind]
        let o = { type: item.type, text: '' }
        //把结构的值赋值给显示数组
        this.typedText.push(o)
        // 开启一个循环计时器每隔 this.typingInterva读取要循环的字符串也就是打字速度
        this.timer = setInterval(() => {
          // 字符串赋值方法
          this.startTyping()
        }, this.typingInterval)
      },
      startTyping() {
        // index的值就是读取字符串的长度与正在读取的字符串长度做对比如果小于就继续读取否则就不读取
        if (this.index < this.originalText[this.ind].text.length) {
          // charAt（）方法是js方法用来读取字符串的第index的值然后赋值给第ind的text值也就是显示的值做拼接
          this.typedText[this.ind].text += this.originalText[
            this.ind
          ].text.charAt(this.index)
          // 如果没有读取到字符串之后一个值就继续读取idnex++
          this.index++
          // console.log(this.index, this.ind)
        } else {
          // 如果读取到最后的一个字符串清除字计时器
          clearInterval(this.timer)
          this.timer = null
          // 并且读取字符串的值索引值重置
          this.index = 0
          // 读取下个需要显示的text的值
          this.ind++
          // 阈值用来规定读取到数组的那个值
          if (this.ind <= this.originalText.length - 1) {
            this.copyTect()
          }
        }
      },
    },
  }
</script>