VUE课程---10、跑马灯效果

一、总结

一句话总结：

跑马灯效果的逻辑就是不断的将字符串的第一个字符挪到字符串最后面，可以用定时器来做，涉及到vue的知识点就是事件绑定

<div id="app">
    <p v-text="msg"></p>
    <div>
        <button @click="lang">浪起来</button>
        <button @click="stop">stop</button>
    </div>
</div>

<script src="../js/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app',
        data:{
            msg:'我有一只小毛驴，我从来也不骑，有一天我心血来潮骑着它去赶集。',
            interval_id:null
        },
        methods:{
            lang:function () {
                //跑马灯效果的逻辑
                //不断的将字符串的第一个字符挪到最后面来

                //找到字符串
                //console.log(this);
                //console.log(this.msg);

                //如果有定时器了，我们就不创建了
                if(this.interval_id!==null) return;

                //没有定时器，我们才创建定时器
                this.interval_id=setInterval(()=>{
                    //1、拿到字符串的第一个字符a
                    let str_a=this.msg.slice(0,1);
                    //2、拿到字符串剩下的字符（字符串b）
                    let str_b=this.msg.slice(1);
                    //3、将字符a拼接到字符串b的后面
                    let new_str=str_b+str_a;
                    //console.log(new_str);
                    this.msg=new_str;
                },400);
            },
            stop(){
                //清除定时器
                clearInterval(this.interval_id);
                //清楚vue的interval_id的数据
                this.interval_id=null;
            }
        }
    });
    //console.log(vm);
</script>

二、跑马灯效果

博客对应课程的视频位置：10、跑马灯效果
https://www.fanrenyi.com/video/26/227

11、跑马灯效果2
https://www.fanrenyi.com/video/26/228

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>跑马灯效果</title>
 6 </head>
 7 <body>
 8 <div id="app">
 9     <p v-text="msg"></p>
10     <div>
11         <button @click="lang">浪起来</button>
12         <button @click="stop">stop</button>
13     </div>
14 </div>
15 
16 <script src="../js/vue.js"></script>
17 <script>
18     let vm=new Vue({
19         el:'#app',
20         data:{
21             msg:'我有一只小毛驴，我从来也不骑，有一天我心血来潮骑着它去赶集。',
22             interval_id:null
23         },
24         methods:{
25             lang:function () {
26                 //跑马灯效果的逻辑
27                 //不断的将字符串的第一个字符挪到最后面来
28 
29                 //找到字符串
30                 //console.log(this);
31                 //console.log(this.msg);
32 
33                 //如果有定时器了，我们就不创建了
34                 if(this.interval_id!==null) return;
35 
36                 //没有定时器，我们才创建定时器
37                 this.interval_id=setInterval(()=>{
38                     //1、拿到字符串的第一个字符a
39                     let str_a=this.msg.slice(0,1);
40                     //2、拿到字符串剩下的字符（字符串b）
41                     let str_b=this.msg.slice(1);
42                     //3、将字符a拼接到字符串b的后面
43                     let new_str=str_b+str_a;
44                     //console.log(new_str);
45                     this.msg=new_str;
46                 },400);
47             },
48             stop(){
49                 //清除定时器
50                 clearInterval(this.interval_id);
51                 //清楚vue的interval_id的数据
52                 this.interval_id=null;
53             }
54         }
55     });
56     //console.log(vm);
57 </script>
58 </body>
59 </html>