当前位置: 首页 > news >正文

Vue2如何在网页实现文字的逐个显现

目录

Blue留言:

效果图:

实现思路:

代码:

1、空字符串与需渲染的字符串的定义

2、vue的插值表达式

3、函数

4、mounted()函数调用

结语:


Blue留言:

在国庆前夕,突发奇想,我想自己给自己做一个个人博客网站,但是我个人时间实在是太有限了,自己还有竞赛没完成,考研也在准备,怕不太好,就去自己的微信群里面问了问里面的大佬们。

 大佬给的回复:

 

既然如此,为了更加坚定我做网站的信念(因为我太懒了,上一个留的vue组件库的坑我都还没填,好像代码我都删了😂),我就让一些不太会技术的同班同学组一个队伍。然后以这个个人博客管理系统为题目,去打竞赛,这样我就算不想做了,也得管他们,不得不做。(算是背水一战?(@_@;))

 那么国庆我就抽了点时间开始写了,反正比赛也挺早的,在下一年的4月左右吧,也可以慢慢摸鱼了。好了废话不多说了,开始说正题,这篇博客写的是我写网站的时候,用到的一个思路,在网页实现文字的逐个显现,我们来看效果图。

效果图:

实现思路:

实际上思路很简单,在vue2中,我们定义两个字符串,一个字符串A为我们需要渲染在网页上的文字,一个字符串B为空字符串。然后将空字符串B的这个变量利用vue2的一个特性{{变量B}}(插值表达式),嵌入进代码中,写一个函数,这个函数的功能是将字符串中A中的每一个字符,取出来,追加到空字符串B中,至于时间的把控,我们可以用定时器来处理,设置自己想要的时间,然后每过多少秒执行一次追加。最后在mounted()函数中,我们去调用它!!

代码:

1、空字符串与需渲染的字符串的定义

2、vue的插值表达式

3、函数

 showText() {const interval = setInterval(() => {  if (this.index < this.fullText.length) {  this.displayedText += this.fullText[this.index];  this.index++;  } else {  this.index = 0 // 清除定时器  this.displayedText=''}  }, 300); // 每300毫秒显示一个字符  },

4、mounted()函数调用

结语:

等我写完了这个网页,比完赛了,就开源出来,虽然写的很史,但我还是不要脸的去展现自己了。 


你好,我是Blue. 为帮助别人少走弯路而写博客 !!!

如果本篇文章帮到了你 不妨点个赞吧~ 我会很高兴的 😄 (^ ~ ^) 。想看更多 那就点个关注吧 我会尽力带来有趣的内容 😎。

如果你遇到了问题,自己没法解决,可以私信问我。

感谢订阅专栏 三连文章!!

http://www.lryc.cn/news/452966.html

相关文章:

  • mybatisplus的查询,分页查询,自定义多表查询,修改的几种写法
  • 括号匹配判断
  • 数据结构(栈和队列的实现)
  • Python批量处理客户明细表格数据,挖掘更大价值
  • NAND Flash虚拟层索引表机制
  • Spring Boot框架:新闻推荐系统开发新趋势
  • RK3568平台(opencv篇)opencv处理图像
  • 【移动端】Viewport 视口
  • PWM 模式
  • 模拟算法(3)_Z字形变换
  • Go语言实现长连接并发框架 - 任务执行流路由模块
  • Windows 编译 FFmpeg 源码详细教程
  • JavaCV 实现视频链接截取封面工具
  • 初识Linux · 进程替换
  • 项目-坦克大战学习-人机ai
  • YOLOv11改进 | Conv篇 | YOLOv11引入SKConv
  • 招联2025校招内推
  • 美容院管理创新:SpringBoot系统设计与开发
  • 文心一言 VS 讯飞星火 VS chatgpt (361)-- 算法导论24.3 3题
  • ArkTS 开发中,有两种网络请求
  • 记录一次病毒启动脚本
  • 2019~2023博文汇总目录
  • springboot项目配置部分依赖从私服拉取,部分从阿里云拉取
  • 返回索引对象中各元素的数据类型 pandas.Index.dtype
  • 通过freepbx搭建小型电话系统的过程
  • pdf处理1
  • 区间覆盖(贪心)
  • [rk3588 debain]cpu死锁问题解决
  • CMU 10423 Generative AI:lec18(大模型的分布式训练)
  • 项目级别的配置文件 `.git/config`||全局配置文件 `~/.gitconfig`