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.baoyu77737.com/資料/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:'吾疑君馭車而飚之，然苦于無(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)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
更多vue學(xué)習(xí)教程請(qǐng)閱讀專題《vue實(shí)戰(zhàn)教程》
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. asp知識(shí)整理筆記4（問(wèn)答模式）2. CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享3. XML入門的常見(jiàn)問(wèn)題(二)4. JSP之表單提交get和post的區(qū)別詳解及實(shí)例5. 讀大數(shù)據(jù)量的XML文件的讀取問(wèn)題6. jsp文件下載功能實(shí)現(xiàn)代碼7. 低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案8. ASP實(shí)現(xiàn)加法驗(yàn)證碼9. javascript xml xsl取值及數(shù)據(jù)修改第1/2頁(yè)10. 概述IE和SQL2k開(kāi)發(fā)一個(gè)XML聊天程序
網(wǎng)公網(wǎng)安備