05 vue 跑马灯效果

最新推荐文章于 2024-07-01 16:33:37 发布

Civitasv

最新推荐文章于 2024-07-01 16:33:37 发布

阅读量186

点赞数

分类专栏： Vue 文章标签： vue html 跑马灯

本文链接：https://blog.csdn.net/qq_40996400/article/details/104139972

版权

Vue 专栏收录该内容

36 篇文章 2 订阅

订阅专栏

跑马灯效果

完整代码：

<html>

<head>
    <meta charset="utf-8">
    </meta>
    <title>vue案例：跑马灯效果</title>
    <!-- 导入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="动起来" @click="roll">
        <input type="button" value="停下来" @click="stop">
        <h4>{{msg}}</h4>
    </div>
    <script>
        // 在vm实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须通过this.数据属性名或this.方法名来进行访问
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "天空好美",
                intervalId: null // 定义定时器id
            },
            methods: {
                // es6写法
                roll() {
                    if (this.intervalId != null) return;
                    // es6写法解决this指向问题，开启定时器
                    this.intervalId = setInterval(() => {
                        // 获取第一个字符
                        var start = this.msg.substring(0, 1);
                        // 获取后面的所有
                        var end = this.msg.substring(1);
                        // 拼接
                        var res = end + start;
                        // 数据改变，会自动提交同步渲染
                        this.msg = res;
                    }, 400)
                },
                stop() {
                    clearInterval(this.intervalId);
                    // 重置为null
                    this.intervalId = null;
                }
            }
        })
    </script>
</body>

</html>