1 <html lang="en"> 2 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>跑马灯的制作</title> 8 </head> 9 <script src="../js/vue.js"></script> 10 11 <body> 12 <div id="app"> 13 <button @click="bili">点我啊</button> 14 <button @click="stop">停止啊</button> 15 <h2>{{msg}}</h2> 16 </div> 17 <script> 18 var vm = new Vue({ 19 el: "#app", 20 data: { 21 msg: "别浪 ...猥琐发育", 22 intervalid: null 23 }, 24 methods: { 25 bili() { 26 //let this 27 // =>箭头函数 ---指向外部this 和外部的保持一致 28 if (this.intervalid != null) 29 return; 30 this.intervalid = setInterval(() => { 31 let start = this.msg.substring(0, 1) 32 let end = this.msg.substring(1) 33 this.msg = end + start 34 }, 500) 35 }, 36 stop() { 37 clearInterval(this.intervalid) 38 this.intervalid = null 39 } 40 41 42 } 43 }) 44 45 </script> 46 </script> 47 </body> 48 49 </html>