Vue實(shí)現(xiàn)簡(jiǎn)單的跑馬燈
Vue實(shí)現(xiàn)滾動(dòng)字條/跑馬燈，供大家參考，具體內(nèi)容如下
內(nèi)容不多，直接看代碼吧
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <title>Title</title> <script src='http://www.lshqa.cn/資料/js/vue.js'></script> <!-- 引入Vue--> </head> <style> *{ text-align: center; } </style><body><div id='app'> <h1>{{txt}}</h1> <button @click='run'>開(kāi)始</button> <button @click='stop'>停止</button></div></body></html><script> new Vue({ el:’#app’, data:{ txt:'吾疑君馭車(chē)而飚之，然苦于無(wú)證以示眾。', 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>
效果如下圖：
更多文章可以點(diǎn)擊《Vue.js前端組件學(xué)習(xí)教程》學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專(zhuān)題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
更多vue學(xué)習(xí)教程請(qǐng)閱讀專(zhuān)題《vue實(shí)戰(zhàn)教程》
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 在Android中使用WebSocket實(shí)現(xiàn)消息通信的方法詳解2. Yii2.0引入CSS,JS文件方法3. JSP數(shù)據(jù)交互實(shí)現(xiàn)過(guò)程解析4. Nginx+php配置文件及原理解析5. python matplotlib:plt.scatter() 大小和顏色參數(shù)詳解6. 常用數(shù)據(jù)庫(kù)JDBC連接寫(xiě)法(轉(zhuǎn)摘)7. Python importlib動(dòng)態(tài)導(dǎo)入模塊實(shí)現(xiàn)代碼8. JavaMail 1.4 發(fā)布9. 淺談python出錯(cuò)時(shí)traceback的解讀10. vue使用webSocket更新實(shí)時(shí)天氣的方法
網(wǎng)公網(wǎng)安備