基于VUE實(shí)現(xiàn)的跑馬燈效果案例

邏輯分析
1.給兩個(gè)按鈕添加v-on的點(diǎn)擊事件，此處用的省略寫(xiě)法：@click
2.核心思想就是對(duì)字符串message進(jìn)行截取，每次截取將最后一個(gè)字放到最前面，剩下的字放到最后面
3.給點(diǎn)擊開(kāi)啟事件增加一個(gè)定時(shí)器，就可以實(shí)現(xiàn)跑馬燈效果
4.點(diǎn)擊取消跑馬燈效果就是講之前的定時(shí)器清除即可
VUE管理區(qū)域

 <div id="app">
        <input type="button" value="跑起來(lái)" @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:"這是跑馬燈，跑馬燈~(yú)~~!",
                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í)例，會(huì)監(jiān)聽(tīng)自己身上 data 中所有數(shù)據(jù)的改變，只要數(shù)據(jù)一發(fā)生變化，就會(huì)自動(dòng)把 最新的數(shù)據(jù)，從 data 上同步到頁(yè)面中去；【好處：程序員指需要關(guān)心數(shù)據(jù)，不需要考慮如何重新渲染DOM頁(yè)面】
               },
               stop(){
                    //清除計(jì)時(shí)器
                    clearInterval(this.intervalId)
                    //每次清除計(jì)時(shí)器后，將計(jì)時(shí)器 intervalId 重新設(shè)為空
                    this.intervalId = null
               } 
            }
        })
    </script>

經(jīng)測(cè)試，最終可實(shí)現(xiàn)跑馬燈效果