Vue實現簡單的跑馬燈
Vue實現滾動字條/跑馬燈，供大家參考，具體內容如下
內容不多，直接看代碼吧
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <title>Title</title> <script src='http://www.cgvv.com.cn/資料/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實戰教程》
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. Intellij IDEA官方最完美編程字體Mono使用2. springboot基于Redis發布訂閱集群下WebSocket的解決方案3. 關于探究python中sys.argv時遇到的問題詳解4. 基于android studio的layout的xml文件的創建方式5. CSS自定義滾動條樣式案例詳解6. JS繪圖Flot如何實現動態可刷新曲線圖7. IDEA項目的依賴(pom.xml文件)導入問題及解決8. python使用requests庫爬取拉勾網招聘信息的實現9. 使用ProcessBuilder調用外部命令，并返回大量結果10. Java發送http請求的示例(get與post方法請求)
網公網安備