基于VUE實(shí)現(xiàn)的跑馬燈效果案例
邏輯分析
1.給兩個(gè)按鈕添加v-on的點(diǎn)擊事件子库，此處用的省略寫法：@click
2.核心思想就是對字符串message進(jìn)行截取，每次截取將最后一個(gè)字放到最前面挎春，剩下的字放到最后面
3.給點(diǎn)擊開啟事件增加一個(gè)定時(shí)器，就可以實(shí)現(xiàn)跑馬燈效果
4.點(diǎn)擊取消跑馬燈效果就是講之前的定時(shí)器清除即可
VUE管理區(qū)域
<div id="app">
<input type="button" value="跑起來" @click="run">
<input type="button" value="停止" @click="stop">
<h4 v-cloak>{{message}}</h4>
</div>
js vue實(shí)例
<script src="../js/vue.js"></script>
<script>
var vue = new Vue({
el:"#app",
data:{
message:"這是跑馬燈豆拨，跑馬燈~~~!",
intervalId:null //將intervalId在初始data中設(shè)為null
},
methods:{
run(){
if(this.intervalId != null) return;
this.intervalId =setInterval (() =>{
//字符串截取
var start = this.message.substring(0,1)
var end = this.message.substring(1)
//調(diào)換位置
this.message = end+start
},400)
// 注意：VM實(shí)例直奋，會監(jiān)聽自己身上 data 中所有數(shù)據(jù)的改變，只要數(shù)據(jù)一發(fā)生變化施禾，就會自動(dòng)把 最新的數(shù)據(jù)脚线，從 data 上同步到頁面中去；【好處：程序員指需要關(guān)心數(shù)據(jù)弥搞，不需要考慮如何重新渲染DOM頁面】
},
stop(){
//清除計(jì)時(shí)器
clearInterval(this.intervalId)
//每次清除計(jì)時(shí)器后邮绿，將計(jì)時(shí)器 intervalId 重新設(shè)為空
this.intervalId = null
}
}
})
</script>
經(jīng)測試渠旁，最終可實(shí)現(xiàn)跑馬燈效果
