vue实现简单的跑马灯效果

本文实例为大家分享了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;
        }
    }
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持NICE源码。