最近在写个人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. AQS学习(一)自旋锁原理介绍(为什么AQS底层使用自旋锁队列?)

    1.什么是自旋锁? 自旋锁作为锁的一种,和互斥锁一样也是为了在并发环境下保护共享资源的一种锁机制.在任意时刻,只有一个执行单元能够获得锁. 互斥锁通常利用操作系统提供的线程阻塞/唤醒机制实现,在争用锁 ...

  2. 《MySQL实战45讲》(8-15)笔记

    MySQL实战45讲 目录 MySQL实战45讲 第八节: 事务到底是隔离的还是不隔离的? 在MySQL里,有两个"视图"的概念: "快照"在MVCC里是怎么工 ...

  3. Ubuntu本地提权适配不同小版本内核(CVE-2017-16995)

    朋友在执行的时候说有的会出现提权不成功,内核crash掉的现象.因为cred结构体的偏移量可能因为内核版本不同.内核编译选项不同而出现差异,作者给的exp偏移量是写死的,所以exp里面对应的偏移地址也 ...

  4. Windows10 + Chrome 触发蓝屏

    姿势一: 打开Chrome,输入路径:\\.\globalroot\device\condrv\kernelconnect 姿势二: 将代码 <iframe src="\\.\glob ...

  5. 3、二进制安装K8s之部署kube-apiserver

    二进制安装K8s之部署kube-apiserver 一.生成 kube-apiserver 证书 1.自签证书颁发机构(CA) cat > ca-config.json <<EOF ...

  6. 关于Ubuntu18.04 linux系统使用安装JDK Mysql

    平台部署 一.安装JDK step1.下载OracleJDKstep2. 解压step3. 加入环境变量 具体操作如下: lemon@ubuntu:~$ cd ~/download/ lemon@ub ...

  7. (强制)要求覆写equals必须覆写hashCode(原理分析)

    hashCode和equals hashCode和equals用来标识对象,两个方法协同工作可用来判断两个对象是否相等.众所周知,根据生成的哈希将数据散列开来,可以使存取元素更快.对象通过调用Obje ...

  8. linux————mysql————修改密码

    SET PASSWORD FOR 'root'@'localhost' = PASSWORD('输入新密码');

  9. 初识javaScript(慕课网学习笔记)

    js输出 window.alert() 警告框 document.write() 写到HTML文档中 innerHTML 写到HTML元素 console.log() 写到浏览器的控制台 <!D ...

  10. protected访问权限

    Java中protected方法访问权限的问题 protected 修饰的成员变量或方法,只能在同包或子类可访问; package 1 public class TestPackage { prote ...