本文例項為大家分享了實現簡單跑馬燈效果的具體程式碼，供大家參考，具體內容如下

效果圖

程式碼

html

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

vue

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

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

            // 當 tCNOaabqyimer 不為空的時候才開啟定時器
            if (this.timer != null) return;
            this.timer =  setInterval(() => {
                // 獲取第一個字元
                var startMsg = this.msg.substring(0,1);
                // 獲取後面所有的字元
                var endMsg = this.msg.substring(1);
                // 重新拼接msg
                t
 
his.msg = endMsg + startMsg;
            },400)
        },stop(){
            clearInterval(this.timer);
            // 可以自己列印一下清除定時器以後的timer， 會發現不是為null的，所有要重新賦值
            this.timer = CNOaabqynull;
        }
    }客棧
});

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。