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>

 

转载于:https://www.cnblogs.com/IwishIcould/p/10872602.html