vue.js（4）--字符串跑马灯

2019-08-14 10:34:35来源：博客园阅读 ()

制作一个字符串的跑马灯效果

（1）实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字符串的跑马灯效果</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div class="app">
        <h1 v-text='msg'></h1>
        <input type="button" value="走你" @click="go">
        <input type="button" value="停" @click="stop">
    </div>
    <script>
        var vm = new Vue({
            el:'.app',
            data:{
                msg:'习得前端妙，抱得美人归！',
                timer:null
            },
            methods:{
                go() {
                    // clearInterval(timer);
                    if(this.timer != null){
                        return;
                        } //使用if判断定时器状态，解决重复开启定时器的bug。
                    this.timer=setInterval(() => {  //箭头函数解决this指向问题，箭头函数内部的this相对于外部this的指向。
                    // console.log(this.msg)需要访问data中数据时，一定要使用this，比如this.msg
                    var firstStr=this.msg.substring(0,1);
                    var lastStr=this.msg.substring(1);//截取函数的使用
                    this.msg=lastStr+firstStr;
                },400)
            },
                stop(){
                    clearInterval(this.timer);
                    this.timer=null;
                }
            }
        })
    </script>
</body>
</html>