当前位置: 首页 > 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. 为帮助别人少走弯路而写博客 !!!

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

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

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

相关文章:

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

目录 Blue留言&#xff1a; 效果图&#xff1a; 实现思路&#xff1a; 代码&#xff1a; 1、空字符串与需渲染的字符串的定义 2、vue的插值表达式 3、函数 4、mounted()函数调用 结语&#xff1a; Blue留言&#xff1a; 在国庆前夕&#xff0c;突发奇想&#xff0c;我想…...

mybatisplus的查询,分页查询,自定义多表查询,修改的几种写法

使用mybatisplus的Db类简化写法 使用静态调用的方式&#xff0c;执行CRUD方法&#xff0c;避免Spring环境下Service循环注入、简洁代码&#xff0c;提升效率需要项目中已注入对应实体的BaseMapper完整使用方式见官方测试用例&#xff1a;官方测试用例地址对于参数为Wrapper的&…...

括号匹配判断

本题实现求表达式中括号是否匹配。只需判断表达式中括号&#xff08;本题中只会出现三种括号&#xff0c;分别是小括号&#xff0c;中括号和大括号&#xff09;是否匹配&#xff0c;表达式中可以有其他值也可没有。 函数接口定义&#xff1a; int match (char *exp); 其中 …...

数据结构(栈和队列的实现)

1. 栈&#xff08;Stack&#xff09; 1.1 栈的概念与结构 栈是一种特殊的线性表&#xff0c;其只允许固定的一段插入和删除操作&#xff1b;进行数据插入和删除的一段叫做栈顶&#xff0c;另一端叫栈底&#xff1b;栈中的元素符合后进先出LIFO&#xff08;Last In First Out&…...

Python批量处理客户明细表格数据,挖掘更大价值

批量处理 .xls 数据并进行归类分析以挖掘内在价值&#xff0c;通常涉及以下步骤&#xff1a; 读取数据&#xff1a;使用 pandas 库读取 .xls 文件。数据清洗&#xff1a;处理缺失值、异常值、重复值等。数据转换&#xff1a;对数据进行必要的转换&#xff0c;如日期格式统一、…...

NAND Flash虚拟层索引表机制

​​​​​ NAND Flash虚拟层的索引表用于建立逻辑块与数据块、日志块之间的关系,用于NAND Flash虚拟层在运行过程中的读写、擦除操作;由于NAND Flash虚拟层采用集中索引的方式,因此在NAND Flash虚拟层启动时需要在NAND Flash存放索引表区域扫描并确定NAND Flash中存…...

Spring Boot框架:新闻推荐系统开发新趋势

3系统分析 3.1可行性分析 通过对本新闻推荐系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本新闻推荐系统采用JAVA作为开发语言&#xff0c;Spring Boot框…...

RK3568平台(opencv篇)opencv处理图像

一.颜色转换 cv2.cvtColor()函数功能: 将一幅图像从一个色彩空间转换到另一个色彩空间。 函数原型: cv2.cvtColor(src,code,dst=None,dstCn=None) 参数定义: src:要转换的源文件 code,转换的色彩空间,在 opencv 中有超过 150 种颜色空间转换方法,但是经常用的只有 B…...

【移动端】Viewport 视口

1. 什么是 Viewport&#xff08;视口&#xff09;&#xff1f; Viewport&#xff08;视口&#xff09;是指浏览器中用户可见的那部分网页内容的区域&#xff0c;简单来说&#xff0c;它是用户当前看到的网页的“窗口”区域。在不同的设备上&#xff0c;Viewport 的大小会有所不…...

PWM 模式

一、介绍 PWM&#xff08;脉宽调制&#xff0c;Pulse-width modulation&#xff09;是一种通过调节脉冲信号的宽度来控制电能输出的方法。PWM是一种方波信号&#xff0c;通常在电子和电气工程中用于调节功率输送&#xff0c;控制电机速度&#xff0c;调节LED亮度&#xff0c;以…...

模拟算法(3)_Z字形变换

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 模拟算法(3)_Z字形变换 收录于专栏【经典算法练习】 本专栏旨在分享学习算法的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 1. 题目链…...

Go语言实现长连接并发框架 - 任务执行流路由模块

文章目录 前言接口结构体接口实现项目地址最后 前言 你好&#xff0c;我是醉墨居士&#xff0c;上篇博客中我们实现了任务执行流上下文部分&#xff0c;接下来我们实现一下任务执行流的路由模块&#xff0c;基于该模块可以实现将消息转发到相应注册的任务执行流中进行处理 接…...

Windows 编译 FFmpeg 源码详细教程

FFmpeg FFmpeg 是一个开源的多媒体框架,它包括了一整套工具和库,可以用来处理(转码、转换、录制、流式传输等)音频和视频。FFmpeg 支持广泛的音视频格式,并且可以在多种操作系统上运行,包括 Windows、Linux 和 macOS。 FFmpeg 的主要组件包括: ffmpeg:这是一个命令行工…...

JavaCV 实现视频链接截取封面工具

引入必要依赖 <!--JavaCV--> <dependency><groupId>org.bytedeco</groupId><artifactId>javacv-platform</artifactId><version>1.5.7</version> </dependency> <dependency><groupId>cn.hutool</groupI…...

初识Linux · 进程替换

目录 前言&#xff1a; 1 直接看代码和现象 2 解释原理 3 将代码改成多进程版本 4 认识所有函数并使用 前言&#xff1a; 由前面的章节学习&#xff0c;我们已经了解了进程状态&#xff0c;进程终止以及进程等待&#xff0c;今天&#xff0c;我们学习进程替换。进程替换我…...

项目-坦克大战学习-人机ai

我们要知道&#xff0c;人机的移动和玩家的移动方式是一样的&#xff0c;所以我们可以将玩家移动代码以及检测碰撞代码移过来&#xff0c;唯一不同的就是人机检测到碰撞后会改变方向继续移动而不是停止 所以我们需要一个随机数使人机检测到碰撞后随机修改方向 Random rd new …...

YOLOv11改进 | Conv篇 | YOLOv11引入SKConv

1. SKConv介绍 1.1 摘要:在标准卷积神经网络(CNN)中,每层中阿尔蒂神经元的感受野被设计为共享相同的大小。在神经科学界众所周知,视觉皮层神经元的感受野大小受到刺激的调制,这在构建CNN时很少考虑。我们在CNN中提出了一种动态选择机制,允许每个神经元根据输入信息的多…...

招联2025校招内推

【投递方式】 直接扫下方二维码&#xff0c;或点击内推官网https://wecruit.hotjob.cn/SU61025e262f9d247b98e0a2c2/mc/position/campus&#xff0c;使用内推码 igcefb 投递&#xff09; 【招聘岗位】 后台开发 前端开发 数据开发 数据运营 算法开发 技术运维 软件测试 产品策…...

美容院管理创新:SpringBoot系统设计与开发

摘 要 如今的信息时代&#xff0c;对信息的共享性&#xff0c;信息的流通性有着较高要求&#xff0c;因此传统管理方式就不适合。为了让美容院信息的管理模式进行升级&#xff0c;也为了更好的维护美容院信息&#xff0c;美容院管理系统的开发运用就显得很有必要。并且通过开发…...

文心一言 VS 讯飞星火 VS chatgpt (361)-- 算法导论24.3 3题

三、假定将 Dijkstra 算法的第4行改为&#xff1a; 4 while |Q|>1 这种改变将让 while 循环的执行次数从 ∣ V ∣ |V| ∣V∣ 次降低到 ∣ V ∣ − 1 |V|-1 ∣V∣−1 次。这样修改后的算法正确吗? 如果要写代码&#xff0c;请用go语言。 文心一言&#xff1a; 将 Dijkst…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...