Vue實現(xiàn)簡單的跑馬燈
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"> <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);//截取下標(biāo)為0的字符串 let end = this.txt.substring(1);//截取從下標(biāo)為1到結(jié)束的字符串 this.txt = end + start; },300); }, stop(){ clearInterval(this.timer) } } }) </script>
效果如下圖:
更多文章可以點擊《Vue.js前端組件學(xué)習(xí)教程》學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程,請大家點擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
更多vue學(xué)習(xí)教程請閱讀專題《vue實戰(zhàn)教程》
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue3中使用router路由實現(xiàn)跳轉(zhuǎn)傳參的方法
這篇文章主要介紹了vue3中使用router路由實現(xiàn)跳轉(zhuǎn)傳參的方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03基于vue+echarts數(shù)據(jù)可視化大屏展示的實現(xiàn)
這篇文章主要介紹了基于vue+echarts數(shù)據(jù)可視化大屏展示的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12vue-pdf實現(xiàn)pdf在線預(yù)覽并實現(xiàn)自定義預(yù)覽框高度
這篇文章主要介紹了vue-pdf實現(xiàn)pdf在線預(yù)覽并實現(xiàn)自定義預(yù)覽框高度方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03vue限制文本輸入框只允許輸入字母、數(shù)字、禁止輸入特殊字符
這篇文章主要介紹了vue限制文本輸入框只允許輸入字母、數(shù)字、不允許輸入特殊字符,通過監(jiān)聽表單輸入的內(nèi)容,使用方法的缺陷,本文通過實例代碼介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10