vue基础实现跑马灯效果

页面元素：

<div id="app">

 

      // 1，給跑起来绑定一个点击事件

      <button @click="lang">跑起來</button>

      <button @click="stop">停止</button>

      <h4>{{msg}}</h4>

</div>

 

script:

2，在按钮事件处理函数，写业务逻辑代码，拿到msg字符串，然后调用字符的substring来进行字符串的截取操作，把第一个字符截取出来，放到最后一个位置

3，为了实现点击一下按钮，自动截取的功能，需要把2步骤的代码放到计时器

let vm = new Vue({

        el: '#app',

        data: {

          msg: 'a-b-c-d-e-f-g',

          intervalId:null//在data上定义计时器id

        },

        methods: {

          lang() {

            if(this.intervalId!=null)return

            this.intervalId= setInterval(() => {

              // 获取到头的第一个字符

              var start = this.msg.substring(0, 1)

              // 获取到后面的所有字符

              var end = this.msg.substring(1)

              // 重新拼接得到新的字符串，并赋值给this.msg

              this.msg = end + start

            }, 400)

            // vue实例中，会监听自己身上所有的data中所有的数据，只要数据一发生变化，就会自动把最新的数据上传到网页上，只需要考虑数据，不需要考虑渲染

          },

          stop(){

            clearInterval(this.intervalId)

            // 没当清除完定时器之后，需要把intervalId设置为null

            this.intervalId = null;

          }

       },

  })