vue笔记之跑马灯效果

<template>
  <div id="app">
    <input type="button" name="" value="开始" @click="start">
    <input type="button" name="" value="停止" @click="stop">
    <h4>{{msg}}</h4>
  </div>
  
</template>
<script>
export default {
  name: 'App',
  data: function () {
    return {
      msg:"欢迎光临~~",
      intervalId:null
    }
    
  },
  methods: {
      start () {
        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;
        },200)
        //

      },
      stop () {
          clearInterval(this.intervalId);
          // 每当清除了定时器，需要重新赋值为null
          this.intervalId = null;
      }
  }
}
</script>