最近在写个人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的更多相关文章

  1. Python爬虫简单实现CSDN博客文章标题列表

    Python爬虫简单实现CSDN博客文章标题列表 操作步骤: 分析接口,怎么获取数据? 模拟接口,尝试提取数据 封装接口函数,实现函数调用. 1.分析接口 打开Chrome浏览器,开启开发者工具(F1 ...

  2. Vue简易博客总结

    项目结构: 首先,编写博客的导航栏组件BlogHeader.vue: <template> <nav> <ul> <li> <router-lin ...

  3. 使用Python在自己博客上进行自动翻页

    先上一张代码及代码运行后的输出结果的图! 下面上代码: # coding=utf-8 import os import time from selenium import webdriver #打开火 ...

  4. auto printer 自动打字机效果

    前段时间在知乎上看到了一个打字机的效果,所以,心血来潮,自己也来写了一个打字机的效果. 比较简单,但还有待优化的地方,因为自己感觉这个效果不够炫,等哪天想出好的点子了.再来更新…… 代码效果预览地址: ...

  5. 不懂CSS也能定制博客界面!

    之前没想过定制博客界面,毕竟CSS,HTML什么的都不懂,不过看了这篇文章分分钟搞定: [详细图解]一步一步教你自定义博客园(cnblog)界面 我是基于模板BlueSky做了些改动,先看修改前后的效 ...

  6. Code First开发系列实战之使用EF搭建小型博客平台

    返回<8天掌握EF的Code First开发>总目录 本篇目录 理解应用需求 数据库设计 创建实体数据模型 创建实体类 创建关系和导航属性 实现DbContext类 执行数据访问 理解仓储 ...

  7. 用python2.7,采集新浪博客

    #coding=utf-8 #新浪博客 import urllib import re import os url=['']*1500 #每一骗博客的地址 title=['']*1500 #每一篇博客 ...

  8. django初探-创建简单的博客系统

    django第一步 1. django安装 pip install django print(django.get_version()) 查看django版本 2. 创建项目 打开cmd,进入指定目录 ...

  9. 用markdown写博客

    目录 用markdown写博客 前言 标题 段落 引用区块 代码块 列表 分隔线 链接 强调.加粗.下划线.删除线 图片 智能链接 表格 转义序列 用markdown写博客 前言 博客园支持用mark ...

随机推荐

  1. 本以为精通Android事件分发机制,没想到被面试官问懵了

    文章中出现的源码均基于8.0 前言 事件分发机制不仅仅是核心知识点更是难点,并且还是View的一大难题滑动冲突解决方法的理论基础,因此掌握好View的事件分发机制是十分重要的. 一.基本认识 1. 事 ...

  2. HDFS(Hadoop Distributed File System )概述

    目录 一.HDFS概述 二.HDFS特点 三.HDFS集群组成:主从架构---一个主节点,多个从节点 1. NameNode(名称节点 / 主节点)----- HDFS集群的管理者 2. DataNo ...

  3. Java的几种创建实例方法的性能对比(二)

    上一篇里对几种书写方式进行了简单的测试,得出了一些初步的结论.这次简单了解Lambda原理后,对测试做了一些调整,发现得到不一样的结果,而这个调整,明显更契合实际开发的场景. 暂时还没有亲自去验证,主 ...

  4. Gnucash的投资记录

    投资活动主要涉及3个账户:资产(Asset)下的子账户记录投资金额,收入(Income)下的子账户记录投资收入,支出(Expense)下的子账户记录投资费用支出(例如银行手续费,证券交易费等). 以购 ...

  5. 课程设计-基于SSM的美容美发造型预约管理系统代码Java理发剪发设计造型系统vue美发店管理系统

    注意:该项目只展示部分功能,如需了解,评论区咨询即可. 1.开发环境 开发语言:Java 后台框架:SSM 前端框架:vue 数据库:MySQL 设计模式:MVC 架构:B/S 源码类型: Web 编 ...

  6. sqli-labs lesson 11-15

    从这一关开始我们开始进入到post注入的世界了,什么是post呢?就是数据从客户端提交到服务器端,例如我们在登录过程中,输入用户名和密码,用户名和密码以表单的形式提交,提交到服务器后服务器再进行验证. ...

  7. S3C2440—4.时钟系统

    文章目录 一.S3C2440时钟体系介绍 1.总线与时钟 2.时钟来源 3.选择时钟 4.产生时钟 5.流程 二.如何配置时钟源 1.设置FCLK频率寄存器 MPLLCON 2.设置分频HDIV.PD ...

  8. HCNA Routing&Switching之广域网协议HDLC和PPP

    前文我们了解了地址转换技术NAT相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15168042.html:今天我们来聊一聊广域网中的两个二层封装协议H ...

  9. .NET Core程序发布报错:project.assets.json”没有“.NETCoreApp,Version=v3.1/win-x64”的目标。确保已运行还原,且“netcoreapp3.1”已包含在项目的 TargetFrameworks中。

    在控制台中使用命令发布.NET Core程序的时候,报如下的错误: project.assets.json"没有".NETCoreApp,Version=v3.1/win-x64& ...

  10. 使用SuperSocket实现自定义协议C/S设计

    一.简介: 21世纪是出于互联网+的时代,许多传统行业和硬件挂钩的产业也逐步转向了系统集成智能化,简单来说就是需要软硬件的结合.这时,软硬件通讯便是这里面最主要的技术点,我们需要做到的是让硬件能够听懂 ...