首页 > 其他 > 详细

vue--实现跑马灯效果

时间:2019-05-15 23:36:20      阅读:337      评论:0      收藏:0      [点我收藏+]
<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>

 

vue--实现跑马灯效果

原文:https://www.cnblogs.com/IwishIcould/p/10872602.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!