Vue 实战——跑马灯效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" name="" value="开始滚动" @click="start">
        <input type="button" name="" value="停止滚动" @click="stop">
        <h4>{{ msg }}</h4>
    </div>

    <script>
        // 注意： 在Vue 实例中想要获取data中的数据或者调用methods 中的方法，必须通过this.xx 来进行访问，这个this 代表的是new 出来的Vue 实例
        var vm = new new Vue({
            el: "#app",
            data: {
                msg: "欢迎使用本系统！！！！",
                intervalId: null, // 直接在data 中定义定时器的ID 这样，各个函数使用这个ID 的定时器是同一个定时器
            },
            methods: {
                start() {
                    // 设置只能有一个定时器
                    if (this.intervalId != null) {
                        alert('要累死了，不用重复点了。。。。')
                        return
                    }

                    // 设置一个定时器
                    this.intervalId = setInterval(() => { //ES6 写法，可以将内部的this直接转换为外部的this
                        var startData = this.msg.substring(0, 1)
                        var endData = this.msg.substring(1)
                        this.msg = endData + startData
                    }, 200);
                    // 注意： vm 实例中，会监听自己身上的data数据的变化，只要数据有变化，那么就会自动同步到页面中去
                    // 好处： 程序员只需要考虑数据就好，不需要考虑如何将数据渲染到页面中。
                },
                stop() {
                    clearInterval(this.intervalId) // 停止定时器
                    this.intervalId = null //将定时器ID 设置null ，便于重新开启
                }
            }
        })
    </script>
</body>
</html>
Vue 实战——跑马灯效果

猜你喜欢
