vue实例：标语大作战

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

效果图

具体代码

代码解析：

<div id="app">
    <div class="one">
        <h3 class="text-danger">{{ msg1 }}</h3>
        <div>
            <!-- 绑定点击事件, 对应于vue实例 methods 中的 start 方法 -->
            <button class="btn btn-danger" @click="start(1)">启动</button>
            <button class="btn btn-danger col-lg-offset-2" @click="stop(1)">停止</button>
        </div>
    </div>
    <br>
    <br>
    <div class="two">
        <h3 class="text-success">{{ msg2 }}</h3>
        <div>
            <button class="btn btn-success" @click="start(2)">start</button>
            <button class="btn btn-success col-lg-offset-2" @click="stop(2)">stop</button>
        </div>
    </div>
</div>

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笔记目录