<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>跑马灯</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <h4>{{ msg }}</h4> <input type="button" value="启动" @click="start"> <input type="button" value="启动1" @click="start1"> <input type="button" value="停止" @click="stop"> </div> <script> new Vue({ el: '#app', data: { msg:"猥琐发育，别浪~~~~", intervalId:null //定义定时器ID }, methods: { start:function(){ //substring来进行字符串截取，把第一个字符截取出来，放到最后一个位置即可 //为了实现点击下按钮，自动截取字符串。在截取代码放在定时器里面 var _this = this; if(_this.intervalId == null){ _this.intervalId = setInterval(function(){ //获取到头的第一个字符 var start = _this.msg.substring(0,1); //获取到 后面的所有字符 var end = _this.msg.substring(1); //重新拼接新的字符串 _this.msg = end + start; } ,400); } }, start1:function(){ //箭头函数外面和里面的this保持一致 this.intervalId = setInterval(() => { //获取到头的第一个字符 var start = this.msg.substring(0,1); //获取到 后面的所有字符 var end = this.msg.substring(1); //重新拼接新的字符串 this.msg = end + start; } ,400); }, stop(){ clearInterval(this.intervalId) this.intervalId = null; } } }) </script> </body> </html>