Vue实现文字跑马灯效果

一.html

	    <div id="app">
	<input type="button" value="浪起来" @click ="pk">
	<input type="button" value="发育" @click ="wz">
	<h4>{{message}}</h4>
	  </div>

二.script

     var vm =new Vue({
  el:'#app',
  data:{
    message:"猥琐发育，别浪～",
    interValId:null
  },
  methods: {
    pk(){
      if(this.interValId != null){
        return
      }
      this.interValId = setInterval(()=>{
        //获取到头的第一个字符
      var start =this.message.substring(0,1)
      //获取到后面到所有字符
      var end = this.message.substring(1)
      //重新拼接得到新的字符串
      this.message =end+start
      },500)
    },
   wz(){
     clearInterval(this.interValId)
     this.interValId =null
   }
  },
})