<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <input type="button" :value="startBtn" @click="startRoll" /> <input type="button" :value="endBtn" @click="endRoll" /> <p>{{content}}</p> </div> </body> <script type="text/javascript"> var test = function(){ alert("hello") } var vm = new Vue({ el:'#app', data:{ startBtn:'开始滚动', endBtn:'停止滚动', content:'中国加油，武汉人民加油，我们一定可以战胜疫情的！', intervalId:null }, methods:{ startRoll(){ if(this.intervalId != null){return} this.intervalId = setInterval(function(){ console.log(vm) var first = vm.content.substring(0,1) var end = vm.content.substring(1,vm.content.length) vm.content = end + first console.log(vm.content) },500) }, endRoll(){ clearInterval(this.intervalId) this.intervalId = null } } }) </script> </html>
效果：
