vue制作简单的跑马灯案例

最新推荐文章于 2024-09-09 11:08:24 发布

huxiaoxiao.

最新推荐文章于 2024-09-09 11:08:24 发布

阅读量89

点赞数

分类专栏： vue 文章标签： Vue.js 跑马灯效果定时器字符串操作事件监听

本文链接：https://blog.csdn.net/lolhuxiaotian/article/details/121228755

版权

vue 专栏收录该内容

65 篇文章 2 订阅

订阅专栏

<body>
    
    <div id="app">
        <input type="button" name="" id="" value="抓" @click="start()">
        <input type="button" value="不抓" @click="stop">
        <p>
            {{message}}
        </p>
    </div>

    <script src="./js/vue.js"></script>
    <script>

        let vm = new Vue({
            el:"#app",
            data:{  // 在一个VM实例的 data 中挂载的数据vm的methods 都可以访问
                
                message:"你不是抓到了我吗...",
                a:null  //定时器的id
            },
            methods:{
                start(){ // 开始跑马灯效果
                    // 思路：
                    // 1.先截取第一个字符，然后把这个字符放到结尾
                    // this.message.substr(起始的索引，要截取的字符串个数)

                  // 如果定时器的id不等于null，就表示已经有定时器在执行了，
                //此时直接退出，这样就不会在开启第二个定时器了
                    if(this.a !==null)return


                    this.a = setInterval(()=>{
                        const head = this.message.substr(0,1)
                        const body = this.message.substr(1)
                        this.message = body+head
                    },200)
                },
                stop(){// 清除定时器
                    clearInterval(this.a)
                    this.a=null
                }
            }
        })



    </script>
</body>