最近在写个人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. ElasticSearch进阶篇(一)--版本控制

    一.前言 ElasticSearch(以下简称ES)的数据写入支持高并发,高并发就会带来很普遍的数据一致性问题.常见的解决方法就是加锁.同样,ES为了保证高并发写的数据一致性问题,加入了类似于锁的实现 ...

  2. CAS5.3服务器搭建与客户端整合SpringBoot以及踩坑笔记

    CAS5.3服务器搭建与客户端整合SpringBoot以及踩坑笔记 cas服务器的搭建 导出证书(1和2步骤是找了课程,随便写了一下存记录,不过对于自己测试不投入使用应该不影响) C:\Users\D ...

  3. DDD领域驱动理解

    在理解领域驱动的时候,网上很多大谈理论的文章,这种对于初学者不是太容易接受.根据我自己的学习经历,建议按照如下几个步骤学习: 粗略的看一遍领域驱动的理论,做到心中有形,知道领域驱动是什么,解决什么问题 ...

  4. Linux-常见报错注释

    1. command not found 命令没有找到 2. No such file or directory         没有这个文件或目录 3. Permission denied     ...

  5. 题解 P4449 于神之怒加强版

    这道题算是我完完整整推的第一道题,写篇题解纪念一下. 题目 废话不多说,直接开始推式子(给新手准备,过程较详细,大佬可自行跳步),以下过程中均假设 \((n\le m)\),\([d=1]\) 类似于 ...

  6. SSM自学笔记(三)

    5.Spring JdbcTemplate 1.Spring JdbcTemplate基本使用 1.1 JdbcTemplate概述 它是spring框架中提供的一个对象,是对原始繁琐的Jdbc AP ...

  7. windows和liunx下换行符问题

    区别 windows换行符是: \r\n liunx换行符是: \n 问题 程序处理的时候就会有问题,因为在Windows的文件多了一个\r 解决办法(转换文件格式) vim file :set fi ...

  8. docker部署Redis6-0-6

    下载redis.conf配置 下载地址: http://download.redis.io/redis-stable/redis.conf 拉取docker镜像 docker pull redis:6 ...

  9. C#简单实现表达式目录树(Expression)

    1.什么是表达式目录树 :简单的说是一种语法树,或者说是一种数据结构(Expression) 2.用Lambda声明表达式目录树: 1 2 3 4 5 Expression<Func<in ...

  10. leaflet 动态线渲染

    可以采用leaflet插件 leaflet-ant-path ... <script src="js/leaflet-ant-path.js" type="text ...