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 ...
随机推荐
- Moco框架jar下载
下载地址: https://repo1.maven.org/maven2/com/github/dreamhead/moco-runner/0.10.0/ 选择如下图下载 下载成功即可使用
- 一台服务器上部署多个Terracotta的方法
在window server 2003 下,利用apache2.2.11+tomcat6+terracotta 群集不能复制session(http://forums.terracotta.org/f ...
- Typora+Markdown便捷发布blog
参考文章:https://www.cnblogs.com/Heroge/p/12459762.html 需要下载Typora和dotnet Typora下载链接:https://www.typora. ...
- ad 差分布线 等长布线
差分要素: 1.原理图差分对名字后缀必须是 _n _p 2.规则改动 定义差分线宽和间距
- ad room 拷贝
当一个电路图中有多个相同组件的时候,我哦们一般使用 room格式拷贝. 基本思路 1.方法一 电路图使用repeat 多通道设计 2.简易的赋值粘贴,事实证明简单有效. 3.在pcb中删除对应一个单 ...
- 保护亿万数据安全,Spring有“声明式事务”绝招
摘要:点外卖时,你只需考虑如何拼单:选择出行时,你只用想好目的地:手机支付时,你只需要保证余额充足.但你不知道这些智能的背后,是数以亿计的强大数据的支持,这就是数据库的力量.那么庞大数据的背后一定会牵 ...
- 【springcloud】hystrix面试题
1 hystrix是什么? Netflix(国外最大的类似于,爱奇艺,优酷)视频网站,五六年前,也是,感觉自己的系统,整个网站,经常出故障,可用性不太高 有时候一些vip会员不能支付,有时候看视频就卡 ...
- 01.SpringMVC之概述
springMVC架构 SpringMVC是Spring框架的一个模块,Spring和SpringMVC无需通过中间整合层进行整合.SpringMVC是基于MVC架构的WEB框架.SpringMVC框 ...
- C# 单元测试,测试资源管理器里面没有需要的单元测试
已经创建了单元测试,却无法运行,更改引用的程序集,将TestPlatform换位QualityTools.UnitTestFramework.具体原因尚未分析,随笔记录.
- hive简单数据分析
简单查询分析 select brand_id from user_log limit 10; -- 查看日志前10数据 好像也没啥,和SQL相同,,limit取前多少条 , as取别名 查询条数统计 ...