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>