製作一個字元串的跑馬燈效果 （1）實例代碼 （2）摘要 實現案例的基本思路是利用substring截取字元串再進行拼接，然後使用定時器來達到動態的效果。 箭頭函數可以解決this的指向問題，箭頭函數內部的this相對於外部this的指向。 需要訪問data中數據時，一定要使用this訪問，比如thi ...
製作一個字元串的跑馬燈效果
（1）實例代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>字元串的跑馬燈效果</title> <script src="../lib/vue.js"></script> </head> <body> <div class="app"> <h1 v-text='msg'></h1> <input type="button" value="走你" @click="go"> <input type="button" value="停" @click="stop"> </div> <script> var vm = new Vue({ el:'.app', data:{ msg:'習得前端妙，抱得美人歸！', timer:null }, methods:{ go() { // clearInterval(timer); if(this.timer != null){ return; } //使用if判斷定時器狀態，解決重覆開啟定時器的bug。 this.timer=setInterval(() => { //箭頭函數解決this指向問題，箭頭函數內部的this相對於外部this的指向。 // console.log(this.msg)需要訪問data中數據時，一定要使用this，比如this.msg var firstStr=this.msg.substring(0,1); var lastStr=this.msg.substring(1);//截取函數的使用 this.msg=lastStr+firstStr; },400) }, stop(){ clearInterval(this.timer); this.timer=null; } } }) </script> </body> </html>
（2）摘要
實現案例的基本思路是利用substring截取字元串再進行拼接，然後使用定時器來達到動態的效果。
箭頭函數可以解決this的指向問題，箭頭函數內部的this相對於外部this的指向。
需要訪問data中數據時，一定要使用this訪問，比如this.msg this.timer。
註意substring（）函數的使用，substring（0,1）表示從0開始截取1位字元，substring（1）表示從1開始截取到最後。
案例中會出現重覆開啟定時器的bug，通過定義timer=null，然後判斷其狀態來解決bug，最後在清除定時器後需要重新賦值timer=null。
