005:vue2使用vue-type-writer实现打字机效果

Vue Type Writer是一个Vue.js 2打字机效果组件,支持像打字机一样模仿键入文本。

文章目录

  • 1. 效果
  • 2. 安装使用

1. 效果

请添加图片描述

2. 安装使用

npm 安装

npm install vue-type-writer --save

完整代码

<template><div class="app-container home"><div class="body"><el-button type="primary" @click="start"> 实现js数组去重 </el-button><VueTypewriter class="tl" ref="typewriter" :interval="50" :style="{ visibility: status }"><div class="comments"><p>const array = [1, 2, 2, 3, 4, 4, 5];</p><p>const uniqueArray = Array.from(new Set(array));</p><p>console.log(uniqueArray);</p></div></VueTypewriter></div></div>
</template><script>
import VueTypewriter from 'vue-type-writer'
export default {name: 'Demo',components: { VueTypewriter },data() {return {status: 'hidden',}},methods: {start() {this.status = 'visible'this.$refs.typewriter.$emit('typewrite')},},
}
</script><style scoped lang="scss">
.home {.body {width: 890px;height: 500px;padding: 20px;border: #b2c92a solid 10px;.comments {p {font-size: 18px;color: green;}}}
}</style>

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

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

相关文章

面向使用者的git与gerrit相关笔记

git与gerrit相关笔记 前言一、gerrit是什么&#xff1f;二、一些配置1.先配置全局email 和name2.gerrit配置ssh key3.可能遇到的问题 三、提交代码和合并冲突常用Git命令三件套严格的要求 总结 前言 本文是介绍什么是gerrit和工作中git与gerrit相关的命令来避免一些提交代码的…

JavaScript中的代理对象(proxy)

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 创建代理对象⭐ 使用代理对象⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友…

负载均衡 —— SpringCloud Netflix Ribbon

Ribbon 简介 Ribbon 是 Netfix 客户端的负载均衡器&#xff0c;可对 HTTP 和 TCP 客户端的行为进行控制。为 Ribbon 配置服务提供者地址后&#xff0c;Ribbon 就可以基于某种负载均衡算法自动帮助服务消费者去请求。Ribbon 默认提供了很多负载均衡算法&#xff0c;例如轮询、随…

leetcode:2446. 判断两个事件是否存在冲突(python3解法)

难度&#xff1a;简单 给你两个字符串数组 event1 和 event2 &#xff0c;表示发生在同一天的两个闭区间时间段事件&#xff0c;其中&#xff1a; event1 [startTime1, endTime1] 且event2 [startTime2, endTime2] 事件的时间为有效的 24 小时制且按 HH:MM 格式给出。 当两个…

使用 PyTorch 的计算机视觉简介 (5/6)

一、说明 本文主要介绍CNN中在pytorch的实现&#xff0c;其中VGG16网络&#xff0c;数据集来源&#xff0c;以及训练过程&#xff0c;模型生成和存储&#xff0c;模型调入等。 二、预训练模型和迁移学习 训练 CNN 可能需要大量时间&#xff0c;并且该任务需要大量数据。但是&am…

python随手小练3

题目&#xff1a; 写出一个判断闰年的python代码&#xff1a; 闰年的条件&#xff1a; 如果N能够被4整除&#xff0c;并且不能被100整除&#xff0c;则是闰年 或者&#xff1a;N能被400整除&#xff0c;也是闰年 即&#xff1a;4年一润并且百年不润&#xff0c;每400年再润一…

Verilog 不同编码风格对综合电路的影响

文章目录 示例 #1示例 #2示例 #3 Verilog是一种硬件描述语言&#xff08;HDL&#xff09;&#xff0c;用于设计数字电路和系统。统一、良好的代码编写风格&#xff0c;可以提高代码的可维护性和可读性。 同样的功能&#xff0c;不同的Verilog 编码风格也会对综合过程产生重大影…

安全远程访问工具

什么是安全远程访问 安全远程访问是指一种 IT 安全策略&#xff0c;允许对企业网络、任务关键型系统或任何机密数据进行授权、受控访问。它使 IT 团队能够根据员工和第三方的角色和工作职责为其提供不同级别的访问权限&#xff0c;安全的远程访问方法可保护系统和应用程序&…

软件设计模式系列之十三——享元模式

1 模式的定义 享元模式&#xff08;Flyweight Pattern&#xff09;是一种结构型设计模式&#xff0c;它旨在减少内存占用或计算开销&#xff0c;通过共享大量细粒度对象来提高系统的性能。这种模式适用于存在大量相似对象实例&#xff0c;但它们的状态可以外部化&#xff08;e…

Android滑动片段

本文所有的代码均存于 https://github.com/MADMAX110/BitsandPizzas 回到BitsandPizzas应用&#xff0c;之前已经创建过创建订单和发出反馈等功能。 修改披萨应用&#xff0c;让它使用标签页导航。在工具条下显示一组标签页&#xff0c;每个选项对应一个不同的标签页。用户单击…

ThreeJS-3D教学一基础场景创建

Three.js 是一个开源的 JS 3D 图形库&#xff0c;用于创建和展示高性能、交互式的 3D 图形场景。它建立在 WebGL 技术之上&#xff0c;并提供了丰富的功能和工具&#xff0c;使开发者可以轻松地构建令人惊叹的 3D 可视化效果。 Three.js 提供了一套完整的工具和 API&#xff0…

知识图谱:信息抽取简易流程

目录 一、标注训练数据 二、训练数据模型 三、实现NER 一、标注训练数据 使用工具:Brat ## BRAT安装 0、安装条件 (1)运行于Linux系统 (2)brat(v1.3p1)仅支持python2版本运行使用,否则会报错 File "standalone.py", line 257except SystemExit, sts:^Syn…

c++中关于Thread Affinity(线程亲和性)示例源码

win10下&#xff0c;可以在任务管理器里面设置某个进程的线程亲和性,如下图: 然后选择相关的cpu&#xff0c;如下图&#xff1a; 这么做可以使得相关的线程在某些密集型计算任务中只会运行在某些指定的cpu上&#xff0c;以便提高性能。 以下是windwos上c程序中应用Thread Affi…

Python 运行代码

一、Python运行代码 可以使用三种方式运行Python&#xff0c;如下&#xff1a; 1、交互式 通过命令行窗口进入 Python 并开始在交互式解释器中开始编写 Python 代码 2、命令行脚本 可以把代码放到文件中&#xff0c;通过python 文件名.py命令执行代码&#xff0c;如下&#xff…

使用 LangChain 和 Elasticsearch 对私人数据进行人工智能搜索

关于本博文的所有代码可以在地址下载&#xff1a;GitHub - liu-xiao-guo/python-vector-private 我将在本博文中其中深入研究人工智能和向量嵌入的深水区。 ChatGPT 令人大开眼界&#xff0c;但有一个主要问题。 这是一个封闭的托管系统。 在一个被大型网络公司改变的世界里生…

【轨道机器人】成功驱动伺服电机(学生电源、DCH调试软件、DH系列伺服驱动器)

1、硬件平台 工控机 学生电源 DH系列伺服驱动器 电机 调试平台&#xff1a;DCH 2、如何利用dch驱动电机 点击可驱动电机 下面的步骤是比较关键的几步&#xff1a; 3、遇到的问题 不能成功驱动电机&#xff0c;还和厂家那边打电话&#xff0c;询问 发现是这…

【C++】bitset位图的简单模拟实现及常见面试题

文章目录 前言一、 bitset模拟实现二、 常见面试题1.给你一百亿个整数&#xff0c;找到只出现一次的数字2. 给两个文件&#xff0c;分别有100亿个整数&#xff0c;我们只有1G内存&#xff0c;如何找到两个文件交集&#xff1f; 前言 快速查找某个数据是否在一个集合中排序 去重…

Hdoop伪分布式集群搭建

文章目录 Hadoop安装部署前言1.环境2.步骤3.效果图 具体步骤&#xff08;一&#xff09;前期准备&#xff08;1&#xff09;ping外网&#xff08;2&#xff09;配置主机名&#xff08;3&#xff09;配置时钟同步&#xff08;4&#xff09;关闭防火墙 &#xff08;二&#xff09…

ddns有什么作用?无公网IP怎么将内网IP端口映射外网访问

DDNS是什么&#xff1f; DDNS英文全称Dynamic Domain Name Server&#xff0c;中文含义是指动态域名服务。很多普通路由器或者智能路由器设置中&#xff0c;都可以找到DDNS&#xff08;动态DNS&#xff09;功能。 上面的解释可能过于专业&#xff0c;其实DDNS通俗点说&#xf…

小程序社区团购demo

概述 实现了用户登录或者手机号&#xff0c;加入团长&#xff0c;邀请团长&#xff0c;各种佣金明细等页面 详细 需求&#xff1a; 根据市场信息反馈&#xff0c;社区团购比较火&#xff0c;有流量的用户可以推广页面 实现了功能&#xff1a; 实现了用户微信登录自动获取…