Vue 走马灯案例

最新推荐文章于 2022-08-29 12:07:13 发布

小豪

最新推荐文章于 2022-08-29 12:07:13 发布

阅读量144

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/jh_jing/article/details/119735210

版权

<body>
    <div id="app">
        <button type="button" @click="go">开始</button>
        <button type="button" @click.stop="stop">停止</button>
        <div>{{msg}}</div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "走马灯案例",
                time: null
            },
            methods: {
                go() {
                    //此时点击很多次开始 他会一直有一个300的加速度 
                    //如果让他刚开始判断time为空就执行计时器，不为空就让它变成空
                    if (this.time != null) {
                        return null
                    } else {
                        this.time = setInterval(() => {
                            //  获取头到第一个字符
                            var star = this.msg.substring(0, 1);
                            console.log(star)
                                // 获取后面所有的字符
                            var end = this.msg.substring(1);
                            //  是他们尾和头拼接起来  
                            this.msg = end + star;
                        }, 300);
                    }

                },
                stop() {
                    clearInterval(this.time)
                    this.time = null; //这里要将time赋值为空 
                }

            }
        })
    </script>
</body>

小豪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 走马灯案例

<body> <div id="app"> <button type="button" @click="go">开始</button> <button type="button" @click.stop="stop">停止</button> <div>{{msg}}</div> </div> <script>...
复制链接

扫一扫