前端实现流式显示文本

<template>
  <div>
    <h1>{{ typedText }}</h1>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const text = 'Hello, World!';
const typedText = ref('');

onMounted(() => {
  let index = 0;
  const interval = setInterval(() => {
    typedText.value += text[index];
    index++;
    if (index === text.length) {
      clearInterval(interval);
    }
  }, 100);
});
</script>