vuejs实现文字逐个显示效果且可以换行

标签：count changeContent vuejs timer content 换行 showText 逐个 speed

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

效果展示如下：

具体实现如下：

<template>
　　<div>
　　　　<div v-html=“showText ”></div>
　　</div>
</template>
<script>
export default {
　　data() {
　　　　return {
　　　　　　timer: null, //settimeout
　　　　　　showText: "",
　　　　};
　　},
　　mounted() {
　　　　this.appear(

　　　　　　"我在黑暗中看见了一双眼， 她向我诉说她的从前。 /n她挥动着手臂，想让大家看见。 /n我想忘掉梦魇， 现实却总是浮现在眼前。 /n她就站在我的面前， 我睁大了双眼，发现， 的身上全是扯线。"

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

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

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

 

　　　　　　content = content.replace(/\/n/g,'<br/>');

　　　　　　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>

来源链接：https://blog.csdn.net/sunnywuxian/article/details/124999549

标签：count,changeContent,vuejs,timer,content,换行,showText,逐个,speed
From： https://www.cnblogs.com/wangyan0926/p/17335704.html