跑马灯案例

一. 跑马灯案例

(一) . 跑马灯案例的原理：给一个跑点击事件和停点击事件。

1.需要跑的时候开一个定时器setInterval，每次都截取字符串的第一个字符串，放到最后一个字符。

第一种按了跑动，原来的定时器不会动，从新动定时器

clearInterval(this.timeId)

第二种如果有定时器在跑，直接结束

if(this.timeId){ return }

2.停止把定时器的id清空

（二）.代码如下:

  <div id="app">

        <button @click='start'>跑</button>

        <button @click='stop'>停</button>

<p>{{msg}}</p>

  </div>

<script src="vue.js"></script>

<script>

const vm = new Vue({

    el:'#app',

    data :{

        msg:'小龙虾29.8一斤，买3斤送一斤!',

        timeId:''        },

    methods:{

        //跑动

        start(){

            // 第一种按了跑动，原来的定时器不会动，从新动定时器

            //clearInterval(this.timeId)

            //第二种如果有定时器在跑，直接结束

            if(this.timeId){  return }

        //开一个定时器setInterval，每次都截取字符串的第一个字符串，放到最后一个字符

        this.timeId =  setInterval(() =>{

            // console.log(this.msg)

        this.msg = this.msg.slice(1) +this.msg.slice(0,1)

        },300)  },

        // 停止

        stop(){

            clearInterval(this.timeId)

            // 把定时器的id清空

            this.timeId=''

        }     }      })

效果图：

注明：跑动的时候不停向前，只有按停止才能停止

二．关于箭头函数的使用场景

this在定时器能用，当前函数能用箭头函数,箭头函数不是万能的。

案例代码如下：

  <div id="app">

        <button @click="fn">按钮</button>

<p>{{msg}}</p>

    </div>

<script src="vue.js"></script>

<script>

    const vm = new Vue ({

        el:'#app',

        data:{msg:'防守打法'},

        methods:{

            fn: () => {

                console.log(1111)

                console.log(this.msg)

  }    }   })

 </script>

效果图：

注明：console.log(this.msg)在控制台没有获取到值