vue3实现打字机的效果

news2024/9/27 9:28:48

前言:

        vue3项目中实现打字机的效果。

实现效果:

实现步骤:

1、安装插件

npm i vue3typed

2、main.js中配置

import vuetyped from 'vue3typed'

const app = createApp(App)
// 挂载打字机的全局方法
app.use(vuetyped)

3、界面使用

 <vuetyped :showCursor="false" :smart-backspace="false" :strings="writeTextArr" :type-speed="15">
    <div class="typing" />
</vuetyped>
<script setup>
    const writeTextArr = ref([
      "张庚生于1911年,生长在中国旧戏改良、新剧登场这个充满博弈的文化环境中,其思想中既有中国传统戏曲影响下的中国美学理想,又有中国人睁眼看世界的民族视野,并贯穿其研究事业的始终。",
    ]);
</script>

4、api文档

。。。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1334387.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ClickHouse 入门与实战教程

目录 1. ClickHouse 简介 什么是 ClickHouse&#xff1f; ClickHouse 的优势和特点 适用场景 2. 安装 ClickHouse 3. ClickHouse 的基本概念 4. ClickHouse 的基本操作 创建数据库和表、插入和查询数据 使用 MergeTree 引擎处理时序数据 管理分区 创建带有分区的 Mer…

IP编址,IP地址介绍与子网划分方法

网络层位于数据链路层与传输层之间。网络层中包含了许多协议&#xff0c;其中最为重要的协议就是IP协议。网络层提供了IP路由功能。理解IP路由除了要熟悉IP协议的工作机制之外&#xff0c;还必须理解IP编址以及如何合理地使用IP地址来设计网络。 上层协议类型 以太网帧中的Typ…

【浏览器】同源策略和跨域

1. 什么是跨域 在说跨域之前,先说说同源策略,什么是同源策略呢?同源策略是浏览器的一种安全机制,减少跨站点脚本攻击(XSS,Cross Site Scripting)、跨站点请求伪造(CSRF,Cross Site Request Forgery)攻击等,因为非同源的请求会被浏览器拦截掉。 同源就是协议、域名(…

常用组件的一些数据指标

QPS metrics 机制&#xff0c;利用 AtomicLong 算出核心接口每分钟调用多少次&#xff08;除以 60 就是高峰期每秒访问次数&#xff09;以及每天被调用总次数 TP99 100ms , 99%的接口耗时在 100ms以内&#xff0c;1%的接口耗时在100ms以上 TP95 100ms , 95%的接口耗时在 1…

Python:最新Windows及Mac开发环境搭建(最详细版,附安装包)

windows 软件下载 从官网下载python和pycharm。大家建议使用同一个版本 下面是下载地址&#xff0c;也可直接到我网盘下载安装包&#xff08;在文章末尾哦&#xff09; ● python https://www.python.org/ ● pycharm https://www.jetbrains.com/zh-cn/pycharm/download/#sect…

计算机毕业设计----SSM实现的一个在线文具学习用品购买商城

项目介绍 本项目分为前后台&#xff0c;前台为普通用户登录&#xff0c;后台为管理员登录&#xff1b; 管理员角色包含以下功能&#xff1a; 管理员登录,管理员信息管理,查看用户信息,新闻公告信息管理,文具类型信息管理,城市信息管理,配货点信息管理,文具信息管理,订单信息…

速看!销冠高效给客户群发消息的秘诀

你是不是也有过这样的疑问&#xff1a;明明都是给客户群发消息&#xff0c;为什么别人的成交率那么高&#xff0c;自己却效果一般呢&#xff1f; 今天就给大家分享销冠常用的高效群发消息秘诀&#xff0c;让大家都能更好地与客户进行沟通&#xff0c;提高成交率&#xff01; …

一盒晶圆只有25片吗?

没有答案&#xff0c;可能是实践的标准。后来在工作过程中发现还有13片的&#xff0c;个人认为研究这个问题不如多看看foup&#xff01; 晶圆载具用于硅片生产、晶圆制造以及工厂之间晶圆的储存、传送、运输以及防护。晶圆载具种类很多&#xff0c;如FOUP用于晶圆制造工厂中晶圆…

金和OA C6 gethomeinfo sql注入漏洞

产品介绍 金和网络是专业信息化服务商,为城市监管部门提供了互联网监管解决方案,为企事业单位提供组织协同OA系统开发平台,电子政务一体化平台,智慧电商平台等服务。 漏洞概述 金和 OA C6 gethomeinfo接口处存在SQL注入漏洞&#xff0c;攻击者除了可以利用 SQL 注入漏洞获取…

cuda加速求解龙格库塔四阶五步积分

一般代码使用cuda加速的方法&#xff1a; 使用PyTorch进行加速&#xff1a; 首先&#xff0c;你需要将你的ODE系统定义为PyTorch模型&#xff0c;这样可以利用PyTorch的自动微分功能和GPU加速。然后&#xff0c;你需要将数据和参数转换为PyTorch张量&#xff0c;并将它们移动到…

基于ssm高校宿舍管理系统论文

基于vue的高校宿舍管理系统的设计与实现 摘 要 当下&#xff0c;正处于信息化的时代&#xff0c;许多行业顺应时代的变化&#xff0c;结合使用计算机技术向数字化、信息化建设迈进。以前学校对于宿舍信息的管理和控制&#xff0c;采用人工登记的方式保存相关数据&#xff0c;这…

IntelliJ IDEA Community(社区版)下载及安装自用版

IntelliJ IDEA Community&#xff08;社区版&#xff09;下载及安装自用版 估计是个开发都逃脱不了用IDEA的命运吧&#xff0c;这么好的软件&#xff0c;白嫖了好多年。感恩。 现在很多公司已经不让用商业版的破解版了&#xff0c;所以这里讲的是社区版。 区别&#xff1a; 商…

在线客服系统的优势:提升客户服务质量与效率的关键工具

一款好的客服系统能够帮助企业节约成本、提高服务效率、消除服务延迟 、加强客户忠诚&#xff0c;为企业的售后服务带来显著的提升&#xff0c;对企业来讲意义非凡。 就像Zoho Desk&#xff0c;它系统稳定性好、安全性高、用户体验效果好、性价比高&#xff0c;同时售后服务好&…

【HarmonyOS开发】ArkTs实现应用配色随系统深浅模式自动切换的三种方式

应用深浅配色模式是一种常见的系统外观选项&#xff0c;环境变暗时切换到深色模式&#xff0c;可以减轻眼睛疲劳和节省设备电量。 注意&#xff1a;DevEco Studio 4.0版本存在bug&#xff0c;无法生效。 1、实现思路 利用系统颜色资源&#xff1a;这种方法最简单&#xff0c;只…

树莓派安装mediapipe方法

MediaPipe 解决方案可跨多个平台使用。 每个解决方案都包含一个或多个模型&#xff0c;您也可以为某些解决方案自定义模型。 以下列表显示了每个受支持平台可用的解决方案以及您是否可以使用 Model Maker 来自定义模型&#xff1a; 在树莓派上安装mediapipe后, python可以支持…

顺序表的实现(头插、尾插、头删、尾删、查找、删除、插入)

目录 一. 数据结构相关概念​ 二、线性表 三、顺序表概念及结构 3.1顺序表一般可以分为&#xff1a; 3.2 接口实现&#xff1a; 四、基本操作实现 4.1顺序表初始化 4.2检查空间&#xff0c;如果满了&#xff0c;进行增容​编辑 4.3顺序表打印 4.4顺序表销毁 4.5顺…

Linux进阶系列(二)——lscpu、htop、seq、shuf、sort

1. lscpu lscpu 命令是Linux系统中用来显示关于CPU架构的信息的工具。它详细展示了CPU的相关信息&#xff0c;包括型号、核心数、架构类型、缓存大小等等。 1.1 物理CPU与逻辑CPU 物理CPU指的是实际存在于硬件系统上的中央处理单元。每个物理CPU都是一个独立的处理器芯片或处…

系列十一(实战)、发送 接收带标签的消息(Java操作RocketMQ)

一、发送 & 接收带标签的消息 1.1、概述 消息的种类纷繁复杂&#xff0c;不同的业务场景需要不同的消息&#xff0c;基于此RocketMQ提供了消息过滤功能&#xff0c;通过Tag或者Key进行区分&#xff0c;本章介绍Tag&#xff0c;我们再往一个Topic里面发送消息的时候&#x…

MySQL定时备份实现

一、备份数据库 –all-databases 备份所有数据库 /opt/mysqlcopy/all_$(date “%Y-%m-%d %H:%M:%S”).sql 备份地址 docker exec -it 容器名称 sh -c "mysqldump -u root -ppassword --all-databases > /opt/mysqlcopy/all_$(date "%Y-%m-%d %H:%M:%S").sq…

SSRF中Redis的利用

目录 1. SSRF 1.1 什么是SSRF 1.2 漏洞成因 1.3 可能会存在SSRF的地方 1.4 SSRF分类 1.5 验证方法 1.6 利用方式 1.7 可以利用的协议 1.8 SSRF过滤绕过 2. SSRF攻击Redis 2.1 环境搭建 2.2 漏洞复现(通过ssrf利用redis写入webshell) 2.2.1 想要写入webshell的两个…