Vue實現跑馬燈效果
阿新 • • 發佈：2020-05-26
本文例項為大家分享了Vue實現跑馬燈效果的具體程式碼，供大家參考，具體內容如下
實現的業務邏輯
1、給[嗨起來]按鈕，繫結一個點選事件 v-on（@）。
2、在按鈕的事件函式處理中，寫相關的業務邏輯：拿到msg的字串，後呼叫字串中的substring來進行字串的擷取操作，放到最後一個位置。
3、為了實現點選下按鈕，自動擷取功能，需要將步驟2中程式碼放到一個定時器中。
實現程式碼如下：
<!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="嗨起來" @click="bejin">
<input type="button" value="停下" @click="stop">
<h4>{{msg}}</h4>
</div>
<script>
//注意：在vm例項中，想獲取data資料或呼叫methods中的方法，必須通過this.資料屬性名或this.方法名來進行訪問，該this表示我們new出來的vm例項物件
var vm=new Vue({
el:'#app',data:{
msg:'嗨起來，跑馬燈~~',intervalId:null
},methods:{
bejin(){
if(this.intervalId!=null) return
//箭頭解決this指向問題，由內部的指向外部
this.intervalId=setInterval(()=>{
//獲取到頭的第一個字元
var start=this.msg.substring(0,1)
//獲取到後面的所有字元
var end=this.msg.substring(1)
//重新拼接得到新的字串，並賦值給this.msg
this.msg=end+start
//注意：vm例項，會監聽自己身上data中所有資料的改變，只要資料一發生變化，就會把最新資料，從data上同步到頁面中去
},50)
},stop(){//停止計時器
clearInterval(this.intervalId)
//每當清除了定時器後，需要重新把intervalId置為null
this.intervalId=null;
}
}
})
</script>
</body>
</html>更多文章可以點選《Vue.js前端元件學習教程》學習閱讀。
關於vue.js元件的教程，請大家點選專題vue.js元件學習教程進行學習。
更多vue學習教程請閱讀專題《vue實戰教程》
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。