Vueはシンプルなマーキー効果を実装します

<div id="アプリ">
    <button @click="start">開始</button>
    <button @click="stop">停止</button>
    <p>{{メッセージ}}</p>
</div>

var アプリ = 新しい Vue({
    el: "#app", // は、現在作成している新しい vue インスタンスがページ上の領域を制御することを示します // data は mvvm 内の m であり、各ページのデータを格納するために使用されます data:{
        メッセージ：「今夜19時30分に李佳琦の生放送ルームをチェックしてください、お見逃しなく～」
        タイマー: null
    },
    方法:{
        始める（）{
            // タイマー テキストを使用して時間通りにスクロールします // 矢印関数は this のポイントの問題を解決できます // 矢印関数内の this のポイントは、関数外の this のポイントと一致しています // タイマーが null でない場合にのみタイマーがオンになります if (this.timer != null) return;
            this.timer = setInterval(() => {
                // 最初の文字を取得します var startMsg = this.msg.substring(0,1);
                // 後続の文字をすべて取得します var endMsg = this.msg.substring(1);
                // メッセージを再構成する
                this.msg = endMsg + startMsg;
            },400)
        },

        停止（）{
            タイマー間隔をクリアします。
            // タイマーを自分でクリアした後でタイマーを印刷すると、null ではないことがわかるので、 this.timer = null; を再割り当てする必要があります。
        }
    }
});