欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實(shí)現(xiàn)跑馬燈效果

 更新時(shí)間：2022年04月07日 11:26:12   作者：巫笙公子  
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue實(shí)現(xiàn)跑馬燈效果的具體代碼，供大家參考，具體內(nèi)容如下

實(shí)現(xiàn)的業(yè)務(wù)邏輯

1、給[嗨起來(lái)]按鈕，綁定一個(gè)點(diǎn)擊事件 v-on（@）。
2、在按鈕的事件函數(shù)處理中，寫(xiě)相關(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="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)擊專(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í)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論