前面六篇講解了Vue的一些基礎知識，正所謂：學以致用，今天我們將用前六篇的基礎知識，來實現類似跑馬燈的項目。 學前準備： 需要掌握定時器的兩個函數：setInterval和clearInterval以及作用域的概念 上代碼，大家可以複製下來直接運行看看效果（vue.min.js 第一篇有下載鏈接）： ...
前面六篇講解了Vue的一些基礎知識，正所謂：學以致用，今天我們將用前六篇的基礎知識，來實現類似跑馬燈的項目。
學前準備：
需要掌握定時器的兩個函數：setInterval和clearInterval以及作用域的概念
上代碼，大家可以複製下來直接運行看看效果（vue.min.js 第一篇有下載鏈接）：
<!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 type="text/javascript" src="js/vue.min.js"></script> </head> <body>
<!-- 頁面部分 --> <div id="app"> <button @click="go()">開始</button> <button @click="stop()">停止</button> <p>{{ msg }}</p> </div>
<!-- JS部分 --> <script type="text/javascript"> var vm = new Vue({ el : "#app", data : { msg : '好好努力，我的奧迪s5~',//跑馬燈文字 interObj : null //定時器對象 }, methods : { go(){ if(this.interObj == null){ _this = this this.interObj = setInterval(function(){ let start = _this.msg.substring(0,1); let end = _this.msg.substring(1); _this.msg = end + start; },1000); } }, stop(){ clearInterval(this.interObj); this.interObj = null; } } }); </script> </body> </html>
代碼分析：
頁面上定義兩個按鈕，分別用來觸發跑馬燈效果和停止跑馬燈效果。js部分分別定義了兩個對象以及對應的方法。
1、go方法主要是使用定時器，每次把msg文本分成兩個部分start和end，start為msg下標為0的字元串，end為msg下標為1至結尾的字元串，然後把end和start拼接為一個新的字元串賦值給msg，從而實現類似於跑馬燈的效果。
2、end方法用來清除定時器，終止跑馬燈效果。
3、methods方法里想要使用datat里的數據，需要使用關鍵字：this，但是這裡要註意this作用域的範圍。
4、大家可以看到每次改變msg文本內容的時候都會立刻反應在頁面上，從側面可以看出Vue響應式的特點。
內容還是很簡單的，主要是用來練習Vue的基礎知識。
學編程一定要多動手，常練習，勤思考！
每天進步一點點！
