从零开始的VUE.js学习（二）

最新推荐文章于 2025-06-09 00:45:00 发布

原创最新推荐文章于 2025-06-09 00:45:00 发布 · 226 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #vue.js #前端

VUE 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍如何使用Vue实现跑马灯文字滚动效果，通过定时器和字符串操作，使文字不断循环滚动，附带启动和停止功能。

实现跑马灯效果

先贴上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app" class="jk" >
    <input type="button" value="run" @click="running">
    <input type="button" value="defeat" @click="stop">
    <h1>{{msg}}</h1>
</div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:"你在教我做事？",
            intervalid:null
        },
        methods:{
            running:function () {
                if (this.intervalid !=null)return;
                var this_ = this
                this_.intervalid = setInterval(function () {
                    var start = this_.msg.substring(0,1)
                    var end = this_.msg.substring(1)
                    this_.msg = end +start
                },400)
            },
            stop:function () {
                clearInterval(this.intervalid)
                this.intervalid = null
            }
        }

    })

</script>
</html>

首先实现这个跑马灯效果我们需要获取h1标签中的字符串，这里我们new一个Vue对象，在data中保存字符串的值，然后我们需要对字符串进行切割，把第一个字符放入最后一个字符的后面，这里用到函数substring（start，stop）来做这件事，截取完之后把两个字符串拼接，组成新的msg。

之后，我们要做的就是让这个字符串跑起来，也就是每隔一段时间就执行一次，这里我们用到计时器函数（这里不知道es6所以没用箭头），每隔400ms就执行一次，因为用到了计数器函数，所以之前this本来是指向Vue的现在变成指向setInterval，所以需要将上面的Vue的this的值赋给this_，这时候基本的操作完成了，但是这个跑马灯会随着你点击按钮的次数越来越快，限制这个我们需要让他返回上一个执行，这里加入判断参数intervalid，将setInterval的id无限返回即可。

接下来就是暂停函数stop，直接采用clearInterval清空intervalid并将intervalid设置为null，这样暂停后即可继续，否则因为clearInterval暂停了计时，跑马灯就跑不起来。