vue--實現跑馬燈效果

<div id="app">
        <input type="button" value="開始" @click="lang">
        <input type="button" value="挺" @click="clear">
        <p>{{msg}}</p>
    </div>

　　

 <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "我哈你丹江口安居客耙齒菌",
                id: null,
            },
            methods: {
                lang: function () {
                    if (!this.id) {//值為true指向下面這一段代碼
                        this.id=setInterval(() => { 
                            var start = this.msg.substring(0, 1);
                            var end = this.msg.substring(1);
                            this.msg = end + start; //是最后一段拼接上前面的一段

                            //當開啟定時器后 id就改變為了2哦
                            console.log(this.id) //2
                        }, 400);
                    } else {
                    
                    }
                },
                clear: function () {
                   clearInterval(this.id);  //清除定時器后  id仍然為2
                   console.log("清除前id為"+this.id);
                   this.id=null;
                }
            },

        })
    </script>