Vue个人博客关于标题自动打字机效果Typewriter

最近在写个人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)
                }
            },
        }

 

注意：

​

 以上 喜欢就点个赞再走吧