Vue学习笔记（六、跑马灯效果）

ttod_qzstudio2024-10-22 18:16

下面是一段跑马灯效果的代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>VueBaseCode</title>
    <script src="./lib/vue.js"></script>
</head>

<body>

    <div id="app">
        <input type="button" value="跑起来" @click="run">
        <input type="button" value="停下来" @click="stop">
        <h3>{{msg}}</h3>
    </div>


    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '好好学习，天天向上。',
                intervalId: null
            },
            methods: {
                run() {
                    if (this.intervalId != null) return;
                    this.intervalId = setInterval(() => {
                        var start = this.msg.substring(0, 1)
                        var end = this.msg.substring(1)
                        this.msg = end + start
                    }, 400);
                },
                stop() {
                    clearInterval(this.intervalId);
                    this.intervalId = null;
                }
            }
        });
    </script>
</body>

</html>

这里我们通过"@"来绑定方法，通过":"来绑定h3内容。

在data对象里面添加了一个setInterval方法的引用intervalId，并设置初始值为null，在run方法里面我们将SetInterval方法的引用赋给leintervalId，在setInterval定时器里面，我们定义了匿名方法，该方法将msg的开头第一个字母和其后面的字符串分别取出，并交换头尾相加，并将其值重新赋给msg。

在stop方法里面，我们停止了定时器，并将interval设置为null。