欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【Vue案例】跑马灯效果

程序员文章站 2022-03-03 09:40:23
...

Vue学习笔记(一)中我们已经学过了 v-on 这个指令,可以用来实现事件的绑定,本文我们利用 v-on 来实现一个简单的跑马灯效果,就是如下这种效果:

【Vue案例】跑马灯效果

第一步:导入Vue包

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>

第二步:创建一个要控制的区域

<div id="app">
    <button>开始</button>
    <button>停止</button>
    <h1>{{ msg }}</h1>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '加油 ~ 加油 ~ 你最棒!!!',
        },
</script>

第三步:绑定事件

使用 v-on 或者其缩写"@",给"开始"和“停止”按钮分别绑定一个点击事件。

<button @click="begin">开始</button>
<button @click="stop">停止</button>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '加油 ~ 加油 ~ 你最棒!!!',
        },
        methods: {
            begin() {
            },
            stop() {
            }
        }
    })
</script>

第四步:begin() 事件处理

拿到 msg 字符串,然后调用字符串的 substring() 方法来进行字符串的截取操作,把第一个字符截取出来,放到最后一个位置即可。为了实现点击按钮自动截取的功能,需要设置一个定时器。

begin() {
    this.intervalId = setInterval(() => {
        var start = this.msg.substring(0, 1)
        var end = this.msg.substring(1)
        this.msg = end + start
    }, 200)
},

第五步:stop() 事件处理

想要停止跑马灯效果,只需要清除定时器即可。

stop() {
    clearInterval(this.intervalId)
}

第六步:在data上定义定时器Id

var vm = new Vue({
    el: '#app',
    data: {
        msg: '加油 ~ 加油 ~ 你最棒!!!',
        intervalId: ''
    }
})

注意: VM实例,会监听自己身上 data 中所有数据的改变,只要数据一发生变化,就会自动把最新的数据,从data 上同步到页面中去。【好处:程序员只需要关心数据,不需要考虑如何重新渲染DOM页面】

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <button @click="begin">开始</button>
        <button @click="stop">停止</button>
        <h1>{{ msg }}</h1>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '加油 ~ 加油 ~ 你最棒!!!',
                intervalId: ''
            },
            methods: {
                begin() {
                    this.intervalId = setInterval(() => {
                        var start = this.msg.substring(0, 1)
                        var end = this.msg.substring(1)
                        this.msg = end + start
                    }, 200)
                },
                stop() {
                    clearInterval(this.intervalId)
                }
            }
        })
    </script>
</body>
</html>
相关标签: vue