vue实现跑马灯效果

vue实现跑马灯效果为阿中哥哥应援

1、效果图
2、实现代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯</title>
    <!-- 引入vue.js-->
    <script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="show">应援</button>
    <button @click="stop">暂停</button>
    <h3 v-text="message"></h3>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"阿中阿中勇敢飞，中华儿女永相随~~~",
            timer:null //在data上定义定时器timer，默认为null
        },
        methods:{
            show(){
                if(this.timer != null) return;
                this.timer = setInterval(() => {
                    //获取到头的第一个字符
                    let start = this.message.substring(0,1);
                    //获取到后面的所有字符
                    let end = this.message.substring(1);
                    //重新拼接得到新的字符串，并赋值给this.message
                    this.message = end + start;
                },300)
            },
            stop(){
                //清除定时器
                clearInterval(this.timer)
                //清除定时器之后，需要重新将定时器置为null
                this.timer = null
            }
        }
    })
</script>
</body>
</html>