跑馬燈
VUE代碼
<!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>Document</title> <!-- 1.導入Vue包 --> <script src="../vuejs/vue.js"></script> </head> <body> <div id="app"> <input type="button" value="跑起來" @click=run> <input type="button" value="停止" @click=stop> <h4> {{msg}} </h4> </div> <script> // 注意：在vm實例中，如果想要獲取data上的數據,或者想要調用 methods 中的方法，必須通過this.數據屬性名 或 this.方法名 來進行訪問 // 這里的this,就表示 我們 new 出來的 VM實例對象 var vm = new Vue({ el: '#app', data: { msg: '農業產品批發管理中心-------', titleStop:null //在data上定義 定時器Id }, methods: { run() { if(this.titleStop!=null){ return; } this.titleStop=setInterval(()=> { //獲取到頭的第一個字符 //js substring方法 提取字符串兩個下標之間的字符 var start = this.msg.substring(0, 1); //end是去除下標為1的字符的字符串 var end = this.msg.substring(1); this.msg = end + start; //注意：VM實例，會監聽自己身上data中所有數據的改變，只要數據一發生變化，就會自動把最新的數據， //從data上同步到頁面中去;[好處：程序員只需要關心數據,不需要考慮如何重新渲染dom頁面] }, 400) }, stop(){ //停止定時器 clearInterval(this.titleStop); //每當清除了定時器之后，需要重新把titleStop設為null this.titleStop=null; } }, }) //分析: //1.給按鈕綁定一個點擊事件 v-on @ // 2. 在按鈕的事件處理函數中,寫相關的邏輯代碼: 拿到msg 字符串， // 然后調用字符串的substring 來進行字符串的截取操作, 把第一個字符截取出來,放到最后一個位置即可。 // 3.為了實現點擊下按鈕,自動截取的功能,需要把步驟2放進去 </script> </body> </html>