Vue个人博客关于标题自动打字机效果Typewriter
最近在写个人Blog 中间看过很多个人博客的开发 一大部分用的是Hexo框架或者vuePress框架 导入各种主题样式插件等等
但是看多了就会发现 很多博主的个人博客基本都很相似 并没有什么新东西呈现出来 我这里是实话实说 虽然很多相似之处
但是确实是简单易用 对开发者很友好 最近我也在考虑要不要把我的博客换成Hexo框架来写 这都是后话了。 今天主题是说
一个很常见的效果 就是打字机效果 这里附上我博客的视频供各位先参考了解一下
如果视频点不开就访问这个链接吧:vue自动打字机效果 Typewriter
就是类似这样的效果 这里用到的是Typewriter
下面附上代码:
template :
<h5>
<p class="typewriter">{{typewriter}}</p>
</h5>
data :
<script>
export default {
data() {
return {
typewriter: '',
i: 0,
timer: 0,
str: '//输入你要显示的的文本',
}
},
methods :
methods: {
typeing() {
if (this.i <= this.str.length) {
this.typewriter = this.str.slice(0, this.i++)
this.timer = setTimeout(() => {
this.typeing()
}, 80)
} else {
clearTimeout(this.timer)
}
},
}
注意:
以上 喜欢就点个赞再走吧
Vue个人博客关于标题自动打字机效果Typewriter的更多相关文章
- Python爬虫简单实现CSDN博客文章标题列表
Python爬虫简单实现CSDN博客文章标题列表 操作步骤: 分析接口,怎么获取数据? 模拟接口,尝试提取数据 封装接口函数,实现函数调用. 1.分析接口 打开Chrome浏览器,开启开发者工具(F1 ...
- Vue简易博客总结
项目结构: 首先,编写博客的导航栏组件BlogHeader.vue: <template> <nav> <ul> <li> <router-lin ...
- 使用Python在自己博客上进行自动翻页
先上一张代码及代码运行后的输出结果的图! 下面上代码: # coding=utf-8 import os import time from selenium import webdriver #打开火 ...
- auto printer 自动打字机效果
前段时间在知乎上看到了一个打字机的效果,所以,心血来潮,自己也来写了一个打字机的效果. 比较简单,但还有待优化的地方,因为自己感觉这个效果不够炫,等哪天想出好的点子了.再来更新…… 代码效果预览地址: ...
- 不懂CSS也能定制博客界面!
之前没想过定制博客界面,毕竟CSS,HTML什么的都不懂,不过看了这篇文章分分钟搞定: [详细图解]一步一步教你自定义博客园(cnblog)界面 我是基于模板BlueSky做了些改动,先看修改前后的效 ...
- Code First开发系列实战之使用EF搭建小型博客平台
返回<8天掌握EF的Code First开发>总目录 本篇目录 理解应用需求 数据库设计 创建实体数据模型 创建实体类 创建关系和导航属性 实现DbContext类 执行数据访问 理解仓储 ...
- 用python2.7,采集新浪博客
#coding=utf-8 #新浪博客 import urllib import re import os url=['']*1500 #每一骗博客的地址 title=['']*1500 #每一篇博客 ...
- django初探-创建简单的博客系统
django第一步 1. django安装 pip install django print(django.get_version()) 查看django版本 2. 创建项目 打开cmd,进入指定目录 ...
- 用markdown写博客
目录 用markdown写博客 前言 标题 段落 引用区块 代码块 列表 分隔线 链接 强调.加粗.下划线.删除线 图片 智能链接 表格 转义序列 用markdown写博客 前言 博客园支持用mark ...
随机推荐
- Android 已发行多年,移动 App 已经趋近饱和,那么 Android 开发还会有那么吃香吗?
一.关于Android的前景 不断地也听见很多人在谈做Android是否还有前途.Android研发在走下坡路了.Android的工作太难找了.Android是不是已经凉了...... 对于这些其实我 ...
- Asp.Net Core Razor页面中使用echarts展示图形
Asp.Net Core Razor页面中使用echarts展示图形 要在Razor页面中使用echarts显示图形,主要问题点在于如何将数据传递给js文件. 1,下载安装echarts库文件 首先引 ...
- CVE-2020-2883漏洞复现&&流量分析
CVE-2020-2883漏洞复现&&流量分析 写在前面 网上大佬说CVE-2020-2883是CVE-2020-2555的绕过,下面就复现了抓包看看吧. 一.准备环境 靶机:win7 ...
- 题解 Walker
传送门 总觉得有个柿子可以推--然而没推出来 考试的时候有个柿子假了导致我没想用两个点可以解出一组参数的事 假掉的柿子告诉我有不少东西能消掉 然而实际上随便选两个点高斯消元解出一组参数,再代入验证看够 ...
- Linux系统管理命令-systemctl 和 sshd 服务
一系统服务管理命令systemctl 开启一个服务 : systemctl start sshd 关闭一个服务: systemctl stop sshd 查看一个服务的状态: systemctl st ...
- 如果被问到 HTTP 协议,你真的能讲清楚吗?
前段时间,在和许久未见的老同学聊天时,突然被问到 http 协议到底是什么?脑海里面第一时间想起来的就是 request 请求.response 响应之类的词汇,但是这样讲他真的能知道是什么吗?我反问 ...
- springboot整合多数据源解决分布式事务
一.前言 springboot整合多数据源解决分布式事务. 1.多数据源采用分包策略 2.全局分布式事务管理:jta-atomikos. ...
- ASP.NET Core:ASP.NET Core程序使用Docker部署
一.前言 这篇文章介绍如何将一个ASP.NET Core应用程序在Docker中进行部署.开发工具使用的是Visual Studio 2019和VS Code. 二.使用Docker部署 我们选择新建 ...
- 一 · 路由事件的三种方式/策略(冒泡 直接 隧道)
WPF中的路由事件是沿着VisualTree传递的,作用是用来调用应用程序的元素树上的各种监听器上的处理程序. (1)冒泡,这种事件处理方式是从源元素向上级流过去,直到到达根节点即顶层节点,一般为最外 ...
- WPF---数据绑定之ValidationRule数据校验(六)
一.概述 我们知道,Binding好比架设在Source和Target之间的桥梁,数据可以借助这个桥梁进行流通.在数据流通的过程中,我们可以在Binding这座桥梁上设置关卡,对数据的有效性进行验证. ...