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.mzph.cn/news/85803.shtml

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

相关文章

2023.9.11 关于传输层协议 UDP和TCP 详解

目录 UDP协议 TCP协议 TCP十大核心机制 确认应答 超时重传 连接管理&#xff08;三次握手 四次挥手&#xff09; 滑动窗口 流量控制 拥塞控制 延时应答 捎带应答 面向字节流 粘包问题 TCP 中的异常处理 经典面试题 对比 TCP 和 UDP 如何使用 UDP 实现可靠传…

Spring面试题15:Spring支持几种bean的作用域?singleton、prototype、request的区别是什么?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:Spring支持几种bean的作用域? Spring支持以下几种Bean的作用域: Singleton(单例):这是Spring默认的作用域。使用@Scope(“singleton”)注解或…

【观察】数字化转型的“下半场”,华为加速行业智能化升级

过去几年数字化转型席卷全球&#xff0c;随着新技术的广泛应用&#xff0c;新的机会和价值正在不断被发现和创造。从某种程度上说&#xff0c;数字化转型不再是“可选项”&#xff0c;而变成了“必选项”。 目前&#xff0c;已经有超过170多个国家和地区制定了各自的数字化相关…

Spring面试题17:Spring中什么是bean装配?有哪几种自动装配方式?自动装配有哪些局限性?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:Spring中什么是bean装配? 在Spring中,Bean装配是指将一个或多个Bean实例化、配置和组合在一起的过程。它是Spring容器的核心功能之一,通过Bean装…

如何搭建专属的物联网私有云?需要考虑哪些因素?

随着物联网技术的快速发展&#xff0c;越来越多的企业开始意识到搭建专属的物联网私有云的重要性。私有云是指企业自主建设和管理的云服务环境&#xff0c;其中企业可以实现对数据和服务的全面控制&#xff0c;同时也可以享受云服务的高效性和灵活性。 一、企业做专属物联网私…

矿山定位系统-矿井人员定位系统在矿山自动化安全监控过程中的应用

一&#xff0c;矿井人员定位系统现阶段使用的必要性 1&#xff0c;煤矿开采是一项非常特殊的工作&#xff0c;现场属于非常复杂多变的环境&#xff0c;井下信号极差&#xff0c;数据传输非常不稳定&#xff0c;人员安全难以保证&#xff0c;煤矿企业一直在研究如何使用更合适的…

如何防止商业秘密泄露(洞察眼MIT系统商业机密防泄密解决方案)

在当今的商业环境中&#xff0c;保护公司的商业秘密是至关重要的。商业秘密可能包括独特的业务流程、客户列表、研发成果、市场策略等&#xff0c;这些都是公司的核心竞争力。一旦这些信息被泄露&#xff0c;可能会对公司的生存和发展产生重大影响。本文将探讨如何通过使用洞察…

Godot配置C#语言编写脚本(使用VSCode作为外部编辑器)

文章目录 Godot部分查看VSCode的所在位置配置外部编辑器 配置VSCode编写脚本中文注释 其他文章字符编码 Godot部分 打开编辑器-编辑器设置&#xff1b; 查看VSCode的所在位置 右键单击你的VScode快捷方式&#xff0c;选择属性。 这里的目标就是你的VSCode所在的位置。 配…

视频监控系统/视频汇聚平台EasyCVR平台页面展示优化

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…

【刷题篇】回溯算法(深度优先搜索(一))

文章目录 无重复字符串的排列组合员工的重要性图像渲染被围绕的区域 无重复字符串的排列组合 无重复字符串的排列组合。编写一种方法&#xff0c;计算某字符串的所有排列组合&#xff0c;字符串每个字符均不相同。 class Solution { public:void DFS(string &s,vector<s…

HTML中name和class,id的区别和联系

在HTML中&#xff0c;name、class和id是用于标识和选择元素的属性。 区别&#xff1a; name属性&#xff1a;用于标识表单元素&#xff0c;特别是在提交表单时&#xff0c;用于识别表单数据。name属性可以在同一表单中的多个元素中重复使用。class属性&#xff1a;用于为一个…

递归,搜索与回溯

1.汉诺塔问题 在经典汉诺塔问题中&#xff0c;有 3 根柱子及 N 个不同大小的穿孔圆盘&#xff0c;盘子可以滑入任意一根柱子。一开始&#xff0c;所有盘子自上而下按升序依次套在第一根柱子上(即每一个盘子只能放在更大的盘子上面)。移动圆盘时受到以下限制: (1) 每次只能移动…

[ 已解决 ]Splunk ES 升级后有些 alert 不能删除

1: 背景: 最近升级Splunk ES, 发现了很多问题,记录一下: 有个很妖的就是有些ES 下面的report / alert 不能删除了。 下面想了一下升级的过程,有些地方的细节,找到原因。 1: 先想一下,是什么对升级产生关键作用: 去发布的机器上面:有这个文件: /opt/splunk/etc/sh…

GPT,GPT-2,GPT-3,InstructGPT的进化之路

ChatGPT 火遍圈内外&#xff0c;突然之间&#xff0c;好多人开始想要了解 NLP 这个领域&#xff0c;想知道 ChatGPT 到底是个什么&#xff1f;作为在这个行业奋斗5年的从业者&#xff0c;真的很开心让人们知道有一群人在干着这么样的一件事情。这也是我结合各位大佬的文章&…

2023-09-23 LeetCode每日一题(树上的操作)

2023-09-23每日一题 一、题目编号 1993. 树上的操作二、题目链接 点击跳转到题目位置 三、题目描述 给你一棵 n 个节点的树&#xff0c;编号从 0 到 n - 1 &#xff0c;以父节点数组 parent 的形式给出&#xff0c;其中 parent[i] 是第 i 个节点的父节点。树的根节点为 0 …

vue3 父子组件传值

一&#xff0c;子传父 父组件 <script setup> import HelloWorld from ./components/HelloWorld.vue import { ref } from vue//直接赋值页面不会自动渲染&#xff0c;使用ref存储响应式数据 import { defineExpose } from "vue";父传子 let val ref(); con…

Python 基于人脸识别的实验室智能门禁系统的设计,附可视化界面

1 简介 本基于人脸识别的实验室智能门禁系统通过大数据和信息化的技术实现了门禁管理流程的信息化的管理操作。平台的前台页面通过简洁的平台页面设计和功能结构的分区更好的提高用户的使用体验&#xff0c;没有过多的多余的功能&#xff0c;把所有的功能操作都整合在功能操作…

你知道 delete 删除属性时的一些细节吗?

探究 delete 的一些细节&#xff0c;起源于刚刚做过的一道笔试&#xff0c;原题如下&#xff1a; a 1; const b 2; console.log(delete a); console.log(delete b); // 输出结果是&#xff1f; // 答&#xff1a;true false我可从来没用过 delete 的返回值&#xff0c;但凡…

C语言大佬的必杀技---宏的高级用法

C语言大佬的必杀技—宏的高级用法 目录: 字符串化标记的拼接宏的嵌套替换多条语句防止一个文件被重复包含宏和函数的区别 可能大家在学习的时候用得比较少&#xff0c;但是在一些代码量比较大的时候&#xff0c;这样使用&#xff0c;可以大大的提高代码的可读性&#xff0c;…