vue跑马灯效果 vue实现简单的跑马灯效果

时间:2021-10-27 今天会下雨吗人气:0

想了解vue实现简单的跑马灯效果的相关内容吗，今天会下雨吗在本文为您仔细讲解vue跑马灯效果的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：vue,跑马灯，下面大家一起来学习吧。

效果图

代码

html

<div id="app">
    <button @click="start">开启</button>
    <button @click="stop">停止</button>
    <p>{{msg}}</p>
</div>

vue

var app = new Vue({
    el: "#app",     // 表示，当前我们new的这vue实例，要控制页面上的那个区域

    // data就是mvvm中的 m，专门用来保存每个页面的数据
    data:{
        msg: "锁定今晚19:30李佳琦直播间,不要错过哟~",
        timer: null
    },
    methods:{
        start(){
            // 通过定时器文字自己按时滚动
            // 箭头函数可以解决this指向问题
            // 箭头函数里的this指向跟函数外面的一致

            // 当 timer 不为空的时候才开启定时器
            if (this.timer != null) return;
            this.timer =  setInterval(() => {
                // 获取第一个字符
                var startMsg = this.msg.substring(0,1);
                // 获取后面所有的字符
                var endMsg = this.msg.substring(1);
                // 重新拼接msg
                this.msg = endMsg + startMsg;
            },400)
        },

        stop(){
            clearInterval(this.timer);
            // 可以自己打印一下清除定时器以后的timer， 会发现不是为null的，所有要重新赋值
            this.timer = null;
        }
    }
});

加载全部内容