VUE绑定事件案例—文字跑马灯效果

VUE绑定事件案例—文字跑马灯效果
要实现的效果：点击【浪起来】的时候，文字逐渐向左移动一个单位（循环）；
点击【猥琐发育】，文字停止移动。
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>

上一个：深圳免费领养宠物的网站（深圳领养宠物狗免费的地方在哪里）

下一个：vue3 setup如何使用props

热门文章

归纳