vue实现走马灯效果

这篇博客介绍了如何在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>

这样跑马灯效果就实现了!!!希望能够帮助到各位~0.0~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值