vue实现走马灯效果

最新推荐文章于 2025-06-19 17:12:49 发布

做个坏男人

最新推荐文章于 2025-06-19 17:12:49 发布

阅读量7.9k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/Cheng_May/article/details/81604132

这篇博客介绍了如何在Vue.js中实现走马灯效果。通过实例代码展示了一个简单的走马灯组件，包括开始（浪起来）和停止（低调）按钮，以及使用setInterval和clearInterval控制文字滚动。走马灯效果通过改变字符串的首尾字符实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天，在课上学习了最新的流行框架vue，老师教我们用vue实现走马灯效果。

别说别的了，直接贴代码

<body>
       <div id="app">

           <input type="button" value="浪起来" @click="lang" />
           <input type="button" value="低调" @click="stop" />
           <h4>{{ msg }}</h4>
       </div>
   </body>
   <script>
       var vm = new Vue({
           el:'#app',
           data:{
               msg:'猥琐发育，别浪~',
               intervalId:null
           },
           methods:{
               lang(){
                   // 为了不重复执行走马灯，我们需要进行判断，如果为null，则执行走马灯，否则不执行
                   if( null != this.intervalId ) return;
                   this.intervalId = setInterval(() => {

                       var start = this.msg.substring(0,1);
                       // 获取到后面的所有字符
                       var end = this.msg.substring(1);
                       // 将字符串拼接
                       this.msg = end + start;
                       }
                   ,400)

               },
               stop(){
                   clearInterval(this.intervalId);
                   // 每当清除了id，需要将id重新赋值为null
                   this.intervalId = null;
               }
           }

       })
   </script>