Vue實現簡單的跑馬燈
更新時間:2020年05月25日 15:57:45 作者:楓思然
這篇文章主要為大家詳細介紹了Vue實現簡單的跑馬燈,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
Vue實現滾動字條/跑馬燈,供大家參考,具體內容如下
內容不多,直接看代碼吧
<!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"> <h1>{{txt}}</h1> <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到結束的字符串 this.txt = end + start; },300); }, stop(){ clearInterval(this.timer) } } }) </script>
效果如下圖:
更多文章可以點擊《Vue.js前端組件學習教程》學習閱讀。
關于vue.js組件的教程,請大家點擊專題vue.js組件學習教程進行學習。
更多vue學習教程請閱讀專題《vue實戰(zhàn)教程》
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。