Vue實(shí)現(xiàn)跑馬燈效果
本文實(shí)例為大家分享了Vue實(shí)現(xiàn)跑馬燈效果的具體代碼，供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)的業(yè)務(wù)邏輯
1、給[嗨起來(lái)]按鈕，綁定一個(gè)點(diǎn)擊事件 v-on（@）。2、在按鈕的事件函數(shù)處理中，寫相關(guān)的業(yè)務(wù)邏輯：拿到msg的字符串，后調(diào)用字符串中的substring來(lái)進(jìn)行字符串的截取操作，放到最后一個(gè)位置。3、為了實(shí)現(xiàn)點(diǎn)擊下按鈕，自動(dòng)截取功能，需要將步驟2中代碼放到一個(gè)定時(shí)器中。
實(shí)現(xiàn)代碼如下：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title> <script src='http://www.leifengta.com.cn/bcjs/vue.min.js'></script></head><body> <div id='app'> <input type='button' value='嗨起來(lái)' @click='bejin'> <input type='button' value='停下' @click='stop'> <h4>{{msg}}</h4> </div> <script> //注意：在vm實(shí)例中，想獲取data數(shù)據(jù)或調(diào)用methods中的方法，必須通過(guò)this.數(shù)據(jù)屬性名或this.方法名來(lái)進(jìn)行訪問(wèn)，該this表示我們new出來(lái)的vm實(shí)例對(duì)象 var vm=new Vue({ el:’#app’, data:{ msg:’嗨起來(lái)，跑馬燈~(yú)~’, intervalId:null }, methods:{ bejin(){ if(this.intervalId!=null) return //箭頭解決this指向問(wèn)題，由內(nèi)部的指向外部 this.intervalId=setInterval(()=>{ //獲取到頭的第一個(gè)字符 var start=this.msg.substring(0,1) //獲取到后面的所有字符 var end=this.msg.substring(1) //重新拼接得到新的字符串，并賦值給this.msg this.msg=end+start //注意：vm實(shí)例，會(huì)監(jiān)聽(tīng)自己身上data中所有數(shù)據(jù)的改變，只要數(shù)據(jù)一發(fā)生變化，就會(huì)把最新數(shù)據(jù)，從data上同步到頁(yè)面中去 },50) }, stop(){//停止計(jì)時(shí)器 clearInterval(this.intervalId) //每當(dāng)清除了定時(shí)器后，需要重新把intervalId置為null this.intervalId=null; } } }) </script></body></html>
更多文章可以點(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. Spring Boot和Thymeleaf整合結(jié)合JPA實(shí)現(xiàn)分頁(yè)效果(實(shí)例代碼)2. 詳解Android studio 動(dòng)態(tài)fragment的用法3. 什么是python的自省4. 解決Android studio xml界面無(wú)法預(yù)覽問(wèn)題5. Springboot Druid 自定義加密數(shù)據(jù)庫(kù)密碼的幾種方案6. Vuex localStorage的具體使用7. php模擬實(shí)現(xiàn)斗地主發(fā)牌8. Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)9. Spring MVC+ajax進(jìn)行信息驗(yàn)證的方法10. vue 使用localstorage實(shí)現(xiàn)面包屑的操作
網(wǎng)公網(wǎng)安備