在Vue中如何实现打字机的效果_vue.js_

前一段时间找工作做网页简历，想实现打字机的效果。

按理说像打字机这种动画效果的实现首选是jquery，毕竟jquery还是以操作dom为主，而vue是数据驱动，但是jquery并没有能狗满足我设想的功能的插件，又偷懒不想自己实现双向绑定，只好自己用vue实现。

代码写的不是很漂亮，希望大家不喜勿喷，这里只是提供一个思路。

最终效果

I‘m ByPunk!
I‘m looking for a job.
I‘m a front-end programmer.
I‘m coding the web…

以上四句话循环重复

以打字机的效果显示输入和删除，因为前面的I‘m是相同的，所以只对后面的内容加以修改。

1.事先定义好字符串str：str='By Punk!'，使用数组的splite方法将str分解成由字母组成的数组。

2.利用for循环，每100毫秒向数组里push一个新的字母，利用vue的双向绑定，数据更新带动视图更新。

3.在容纳字母的div后写一个竖杠“|”并加上不断闪烁的动画，模拟打字机光标。

4.在每次push的时候，判断当前的索引i是否是数组的最后一个元素，如果是，则在2秒后开始清除。

5.“删除”具体实现跟“输入”刚好相反，每200毫秒从数组从pop出最后一项。

6.使用watch钩子函数实现四句话的循环重复。

具体代码如下

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！