vuejs基礎-跑馬燈效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue.min.js" ></script> </head> <body> <div id="app"> <input type="button" value="按鈕" @click="lang" /> <input type="button" value="按鈕" @click="stop" /> <h1 v-text="msg"></h1> </div> </body> <script> new Vue({ el:"#app", data:{ msg:"這是一個跑馬燈效果！", intervalId:null }, methods:{ /* lang(){ console.log(this.msg); var _this = this; setInterval(function () { var start = _this.msg.substring(0,1); var end = _this.msg.substring(1); var newMsg = end + start; _this.msg = newMsg; },400); }*/ lang(){ if(this.intervalId != null) return; console.log(this.msg); this.intervalId = setInterval(() => { var start = this.msg.substring(0,1); var end = this.msg.substring(1); var newMsg = end + start; this.msg = newMsg; },400); }, stop(){ clearInterval(this.intervalId); this.intervalId = null; } } }); </script> </html>
