Vue&JS 文字逐个出现

实现方式：开始文字设置为空 ，然后通过添加定时器截取content字符串来实现

效果展示如下：

<template>
  <div>
    <span>{{ showText }}</span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      timer: null, //settimeout
      showText: "",
    };
  },

  mounted() {
    this.appear(
      "俄乌局势发生变化？泽连斯基点名批评西方国家，喊话普京坐下来谈。"
    );
  },

  methods: {
    appear(content) {
      const _this = this;

      this.showText = "";
      clearTimeout(this.timer);

      var speed = 50; //设置定时的速度 越来越快
      var count = 1;

      function changeContent() {
        _this.showText = content.substring(0, count); //截取字符串
        count++;

        if (count != content.length + 1) {
          speed -= 1;
          if (speed < 5) speed = 5;

          _this.timer = setTimeout(changeContent, speed);
        }
      }
      changeContent();
    },
  },
};
</script>