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

Vue系列教程(五)跑马灯效果案例

程序员文章站 2022-02-19 06:34:42
...

这篇文章使用vue来制作一个跑马灯效果,下面是实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯效果</title>
</head>
<body>
<div id="app">
    <input type="button" value="开始" @click="start">
    <input type="button" value="结束" @click="stop">
    <h4>{{msg}}</h4>
</div>
<script SRC="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '我是一个跑马灯~',
            intervalId: null // 定时器Id
        },
        methods: {
            start() {
                if (this.intervalId != null) {
                    // 如果定时器已经开启,则不操作
                    return
                }
                this.intervalId = setInterval(() => {
                    // 获取到头部的第一个字符
                    var start = this.msg.substring(0, 1)
                    // 获取到后面的所有字符
                    var end = this.msg.substring(1)
                    // 重新拼接得到新的字符串,并赋值为this.msg
                    this.msg = end + start
                }, 400)
            },
            stop() { // 停止定时器
                clearInterval(this.intervalId)
                // 每次清除了定时器只有,需要重新把intervalId置为null
                this.intervalId = null
            }
        }
    })
</script>
</body>
</html>

运行效果:
Vue系列教程(五)跑马灯效果案例
注意:

  • substring 来截取字符,把第一个字符截取出来,放在最后一个位置
  • setInterval是一个定时器,这里设置的时间是400毫秒
  • 在vm实例中,如果想要使用data中的数据或者想要调用methods中的方法,必须使用this.数据属性名this.方法名 来进行访问
  • vm实例会监听data中所有数据的改变,只要数据已发生变化,就会自动把最新的数据从data上同步到页面中去,程序员只需要关心数据,不需要考虑如何重新渲染到页面
  • 箭头函数的目的是让箭头函数内部的this始终和外部的this保持一致
相关标签: vue.js vue vue.js