使用vue制作一个跑马灯效果

电脑一台

VSCode

下图是小编这个小的跑马灯项目的目录结构，在根目录下的lib文件夹中放一个vue的js，然后创建一个跑马灯的html，如下图：

下图是小编的html中的代码，在页面中放置两个按钮，一个是启动按键，一个是停止跑马灯按键，然后有一个显示的区域，如下图：

下图是小编script中的代码，这里主要是创建vue等，接下来开始具体说明其中的作用，如下图：

el元素获取vue的控制区域，在data中设置全局变量的值，intervalId为定时器的id，如下图：

下图是启动按钮的代码，这里是判断当前全局的定时器id是否有值，如果有值，说明当前定时器已经启动，不需要再次启动，如果没有值，则开始启动，如下图：

下图是停止按钮的代码，这里是首先关闭定时器，然后经定时器的id置空，如下图：

然后启动浏览器，点击按钮查看字符串的跑马灯效果，如下图：

个人观点，仅供参考。

感谢阅读。