最近在写个人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. 了解CSS in JS(JSS)以及在React项目中配置并使用JSS

    目录 认识JSS 什么是JSS JSS 的常见实现 JSS 的好处与坏处 好处 坏处 使用模块化CSS实现JSS 安装插件 在React项目中的tsconfig.json中添加配置 vscode项目中 ...

  2. STM32启动文件详解及SystemInit函数分析(转)

    ;先在RAM中分配系统使用的栈,RAM的起始地址为0x2000_0000 ;然后在RAM中分配变量使用的堆 ;然后在CODE区(flash)分配中断向量表,flash的起始地址为0x0800_0000 ...

  3. linux c语言学习笔记之守护进程

    哈尔滨理工大学软件工程专业08-7李万鹏原创作品,转载请标明出处 http://blog.csdn.net/woshixingaaa/archive/2010/06/06/5651095.aspx 守 ...

  4. 带你读AI论文丨用于目标检测的高斯检测框与ProbIoU

    摘要:本文解读了<Gaussian Bounding Boxes and Probabilistic Intersection-over-Union for Object Detection&g ...

  5. Qt开发Gif播放器

    一.资源下载地址 https://www.aliyundrive.com/s/jBU2wBS8poH 本项目路径:项目->免费->Gif播放器(包含整个工程源码,vs2019打开即可编译运 ...

  6. 题解 God Knows

    传送门 这里有个线段树维护单调栈的神仙技巧 同机房dalao @Yubai的不同理解方式 yysy,我考场上连\(n^2\)的暴力都没搞出来 这里实际上求的是最小权极大上升子序列 但这个跟题目几乎没什 ...

  7. taro小程序地址选择组件

    效果图: address_picker.tsx: import Taro, { Component } from '@tarojs/taro' import { View, PickerView, P ...

  8. mfc HackerTools监控键盘按键

    string GetKey(int Key) { string KeyString = ""; //判断符号输入 const int KeyPressMask = 0x800000 ...

  9. 理解ASP.NET Core - [01] Startup

    注:本文隶属于<理解ASP.NET Core>系列文章,请查看置顶博客或点击此处查看全文目录 准备工作:一份ASP.NET Core Web API应用程序 当我们来到一个陌生的环境,第一 ...

  10. Git&Github介绍

    git&github 什么是GIT 是一个源代码管理工具 源代码为什么要管理起来? 你写的东西就叫源代码,第三方的库和框架都不算. 让源代码可以被追溯,主要记录每次变更了什么,谁主导这次变化. ...