最近在写个人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. Moco框架jar下载

    下载地址: https://repo1.maven.org/maven2/com/github/dreamhead/moco-runner/0.10.0/ 选择如下图下载 下载成功即可使用

  2. 一台服务器上部署多个Terracotta的方法

    在window server 2003 下,利用apache2.2.11+tomcat6+terracotta 群集不能复制session(http://forums.terracotta.org/f ...

  3. Typora+Markdown便捷发布blog

    参考文章:https://www.cnblogs.com/Heroge/p/12459762.html 需要下载Typora和dotnet Typora下载链接:https://www.typora. ...

  4. ad 差分布线 等长布线

    差分要素: 1.原理图差分对名字后缀必须是 _n _p 2.规则改动 定义差分线宽和间距

  5. ad room 拷贝

    当一个电路图中有多个相同组件的时候,我哦们一般使用 room格式拷贝. 基本思路 1.方法一  电路图使用repeat 多通道设计 2.简易的赋值粘贴,事实证明简单有效. 3.在pcb中删除对应一个单 ...

  6. 保护亿万数据安全,Spring有“声明式事务”绝招

    摘要:点外卖时,你只需考虑如何拼单:选择出行时,你只用想好目的地:手机支付时,你只需要保证余额充足.但你不知道这些智能的背后,是数以亿计的强大数据的支持,这就是数据库的力量.那么庞大数据的背后一定会牵 ...

  7. 【springcloud】hystrix面试题

    1 hystrix是什么? Netflix(国外最大的类似于,爱奇艺,优酷)视频网站,五六年前,也是,感觉自己的系统,整个网站,经常出故障,可用性不太高 有时候一些vip会员不能支付,有时候看视频就卡 ...

  8. 01.SpringMVC之概述

    springMVC架构 SpringMVC是Spring框架的一个模块,Spring和SpringMVC无需通过中间整合层进行整合.SpringMVC是基于MVC架构的WEB框架.SpringMVC框 ...

  9. C# 单元测试,测试资源管理器里面没有需要的单元测试

    已经创建了单元测试,却无法运行,更改引用的程序集,将TestPlatform换位QualityTools.UnitTestFramework.具体原因尚未分析,随笔记录.

  10. hive简单数据分析

    简单查询分析 select brand_id from user_log limit 10; -- 查看日志前10数据 好像也没啥,和SQL相同,,limit取前多少条  , as取别名 查询条数统计 ...