记录vue里文字逐个展示效果

 

html
<el-button @click.native="getAnswer">查询</el-button>
    <div v-text="answer"></div>
数据
data(){
    return {
        answer:''
    }
}

//方法
async getAnswer() {
      // 调用API获取回答， 模拟后端返回的数据
      const data =
        '文字逐个展示，文字逐个展示，文字逐个展示文字逐个展示文字逐个展示文字逐个展示文字逐个展示文字逐个展示文字逐个展示文字逐个展示文字逐个展示';
      // 模拟打字机效果
      let text = "";
      for (let i = 0; i < data.length; i++) {
        text += data.charAt(i);
        await new Promise((resolve) => {
          setTimeout(resolve, 50)
        });
        this.answer = text;
      }
    }