vue实例：标语大作战

京东与苏宁大战时，涌现了很多有意思的标语，本篇用vue实现两家的标语作战例子。效果如下：

效果图

具体代码

代码解析：

    

        
{{ msg1 }}
        

            
            启动
            停止
        
    
    

    

    

        
{{ msg2 }}
        

            start
            stop
        
    

let vm = new Vue({
    el: "#app",
    data: {
        msg1: '又是一年双十一，干倒苏宁小猫咪!',
        msg2: '某东若是真的强，头条何须老板娘~~~',
        intervalId1: null, // 定时器
        intervalId2: null,
    },
    methods: {
        start(num) {
            let intervalId = 'intervarId' + num;
            let msg = 'msg' + num;

            // 判断是否正是运行，防止开启多个定时器
            if (this[intervalId] != null) {
                return;
            }
            
            // 设置定时器
            this[intervalId] = setInterval(() => {
                // 跑马灯效果：截取第一个字符拼接到最后一个字符
                let start = this[msg].substring(0, 1);
                let end = this[msg].substring(1);
                this[msg] = end + start;
            }, 300)
        },
        stop(num) {
            // 清除定时器
            let intervalId = 'intervarId' + num;
            clearInterval(this[intervalId]);
            this[intervalId] = null;
        }
    }
})

标语大作战

如想了解更多的vue实例，请查阅我的vue笔记目录