Vue實現簡單的跑馬燈
Vue實現滾動字條/跑馬燈，供大家參考，具體內容如下
內容不多，直接看代碼吧
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <title>Title</title> <script src='http://www.wxshucaidpc.com/資料/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實戰教程》
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備