您好,登錄后才能下訂單哦!
這篇文章主要講解了Vue如何實現(xiàn)簡單的跑馬燈,內(nèi)容清晰明了,對此有興趣的小伙伴可以學習一下,相信大家閱讀完之后會有幫助。
內(nèi)容不多,直接看代碼吧
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../資料/js/vue.js"></script> <!-- 引入Vue--> </head> <style> *{ text-align: center; } </style> <body> <div id="app"> <h2>{{txt}}</h2> <button @click="run">開始</button> <button @click="stop">停止</button> </div> </body> </html> <script> new Vue({ el:'#app', data:{ txt:"吾疑君馭車而飚之,然苦于無證以示眾。", timer:null }, methods:{ run(){ if(this.timer != null){ return; } this.timer = setInterval(()=>{ let start = this.txt.substring(0,1);//截取下標為0的字符串 let end = this.txt.substring(1);//截取從下標為1到結(jié)束的字符串 this.txt = end + start; },300); }, stop(){ clearInterval(this.timer) } } }) </script>
效果如下圖:
看完上述內(nèi)容,是不是對Vue如何實現(xiàn)簡單的跑馬燈有進一步的了解,如果還想學習更多內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。