vue实现文字一个字一个字的显示（开箱即用）

在Vue中，可以通过定时器和计算属性来实现文字一个字一个字的显示效果。以下是一个简单的示例：

<template>
  <div>
    <p>{{ typedMessage }}</p>
    <button @click="startShowing">开始</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
      typedMessage: '',
      interval: null
    };
  },
  methods: {
    startShowing() {
      this.typedMessage = '';
      clearInterval(this.interval);
      this.interval = setInterval(() => {
        if (this.typedMessage.length < this.message.length) {
          this.typedMessage += this.message[this.typedMessage.length];
        } else {
          clearInterval(this.interval);
        }
      }, 500); // 每500毫秒添加一个字符
    }
  }
};
</script>

在这个例子中，message 是需要逐字显示的完整信息。typedMessage 用于动态生成已经显示的文字。startShowing 方法用于初始化显示过程，并设置一个定时器，每500毫秒添加一个字符，直至信息完全显示。当点击按钮时，定时器开始工作。