这篇文章主要介绍Vue如何实现跑马灯效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！跑马灯效果说明：单击"应援"按钮文字向左飘动,再单击"暂停"按钮停止当前飘动完整代码 (注
这篇文章主要介绍Vue如何实现跑马灯效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
跑马灯效果
说明：单击"应援"按钮文字向左飘动,再单击"暂停"按钮停止当前飘动
完整代码 (注意：代码中需要引入vue.js文件，这个文件自己根据目录位置引入，具体位置代码中有注释)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>跑马灯</title> <!-- 引入vue.js文件--> <script src="../vue.js"></script> <style type="text/CSS"> #app{ padding: 20px; } </style></head><body><div id="app"> <button @click="run">应援</button> <button @click="stop">暂停</button> <h4>{{msg}}</h4></div><script> new Vue({ el:"#app", data:{ msg:"朋友朋友我爱你，就像老鼠爱大米~~~!", timer:null //在data上定义定时器timer，默认为null }, methods:{ run(){ // 如果timer已经赋值就返回 if(this.timer){return}; this.timer = setInterval(() => { // msg分割为数组 var arr = this.msg.split(''); // shift删除并返回删除的那个，push添加到最后 // 把数组第一个元素放入到最后面 arr.push(arr.shift()); // arr.join('')吧数组连接为字符串复制给msg this.msg = arr.join(''); },100) }, stop(){ //清除定时器 clearInterval(this.timer); //清除定时器之后，需要重新将定时器置为null this.timer = null; } } })</script></body></html>以上是“Vue如何实现跑马灯效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网精选频道！
--结束END--
本文标题: Vue如何实现跑马灯效果
本文链接: https://www.lsjlt.com/news/304351.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0