VUE绑定事件案例—文字跑马灯效果-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_49596018/article/details/113353917

本文展示了如何使用Vue.js实现一个文字跑马灯效果，点击按钮可以使文字向左移动，再次点击则停止移动。通过设置定时器和字符串拼接实现动态效果。

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

VUE绑定事件案例—文字跑马灯效果
要实现的效果：点击【浪起来】的时候，文字逐渐向左移动一个单位（循环）；
点击【猥琐发育】，文字停止移动。
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字跑马灯</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="浪起来" @click="lang">
        <input type="button" value="猥琐发育" @click="stop">
        <h4> {{mess}} </h4>
    </div>


</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            mess: "猥琐发育，别浪！！！",
            timer:""
        },
        methods: {
            lang() {

                if(this.timer!="")  return;  //每次被点击了，就清除定时器，避免多次点击，越跑越快
                this.timer = setInterval(() => {
                    const start = this.mess.substring(0, 1)//获取到第一个字符
                    const end = this.mess.substring(1)//获取到第一个后面的字符
                    this.mess = end + start//重新组成新的数据
                }, 300)
            },
            stop() {
              clearInterval(this.timer);
              this.timer=""  //每次清除了定时器，就让定时器重新赋值为空
            }
        }
    })
</script>

</html>