vue實現簡單的跑馬燈效果

<div id="app">
    <button @click="start">開啟</button>
    <button @click="stop">停止</button>
    <p>{{msg}}</p>
</div>

var app = new Vue({
    el: "#app",     // 表示，當前我們new的這vue實例，要控制頁面上的那個區域

    // data就是mvvm中的 m，專門用來保存每個頁面的數據
    data:{
        msg: "鎖定今晚19:30李佳琦直播間,不要錯過喲~",
        timer: null
    },
    methods:{
        start(){
            // 通過定時器文字自己按時滾動
            // 箭頭函數可以解決this指向問題
            // 箭頭函數裡的this指向跟函數外面的一致

            // 當 timer 不為空的時候才開啟定時器
            if (this.timer != null) return;
            this.timer =  setInterval(() => {
                // 獲取第一個字符
                var startMsg = this.msg.substring(0,1);
                // 獲取後面所有的字符
                var endMsg = this.msg.substring(1);
                // 重新拼接msg
                this.msg = endMsg + startMsg;
            },400)
        },

        stop(){
            clearInterval(this.timer);
            // 可以自己打印一下清除定時器以後的timer， 會發現不是為null的，所有要重新賦值
            this.timer = null;
        }
    }
});