Vue&JS 文字逐个出现
Vue&JS 文字逐个出现实现方式:开始文字设置为空 ,然后通过添加定时器截取content字符串来实现
·
实现方式:开始文字设置为空 ,然后通过添加定时器截取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>
更多推荐
已为社区贡献4条内容
所有评论(0)