Vue跑马灯效果（es5）

最新推荐文章于 2025-06-25 09:02:03 发布

Zyl_CN

最新推荐文章于 2025-06-25 09:02:03 发布

阅读量474

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 小练习

本文链接：https://blog.youkuaiyun.com/Zyl_CN/article/details/82797590

Vue 同时被 2 个专栏收录

43 篇文章

订阅专栏

小练习

32 篇文章

订阅专栏

本文介绍如何使用 Vue.js 实现一个简单的字符串轮播效果。通过按钮控制字符串的开始滚动和停止，利用 Vue 的数据绑定和定时器功能，实现字符的循环滚动展示。

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

<div id="app">
    <button @click="go">走</button>
    <button @click="stop">停</button>
    <h3> {{msg}} </h3>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'123456789~~',
            timer:null,
        },
        methods:{
            go:function () {
                if(this.timer!=null){
                    return;
                }
                var that=this;
                this.timer=setInterval(function () {
                    var star=that.msg.substring(0,1);
                    var end=that.msg.substring(1);
                    that.msg=end+star;
                    return that.msg;
                },400)
            },
            stop:function () {
                clearInterval(this.timer);
                this.timer=null;
            }
        }
    })
</script>