【Vue案例一】实现跑马灯效果

最新推荐文章于 2024-05-13 21:44:04 发布

心。晴

最新推荐文章于 2024-05-13 21:44:04 发布

阅读量955

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/jingjing217/article/details/108264143

版权

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

在这里插入图片描述

第一步：导入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>

心。晴

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【Vue案例一】实现跑马灯效果

在Vue学习笔记（一）中我们已经学过了 v-on 这个指令，可以用来实现事件的绑定，本文我们利用 v-on 来实现一个简单的跑马灯效果，就是如下这种效果：第一步：导入Vue包<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>第二步：创建一个要控制的区域<div id="app"> <button>开始</button>
复制链接

扫一扫