Vue 走马灯案例

最新推荐文章于 2025-03-26 15:28:30 发布

小豪

最新推荐文章于 2025-03-26 15:28:30 发布

阅读量188

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/jh_jing/article/details/119735210

版权

本文详细介绍了如何使用 Vue.js 框架创建一个功能完善的走马灯组件，包括图片轮播、自动切换和导航箭头等交互功能。通过学习，读者可以掌握 Vue 中的状态管理和事件处理技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>