步骤分析:
    1.给浪起来按钮,绑定一个点击事件
    2. 在按钮的事件处理函数中,写相关的业务代码,拿到msg字符串,用substring来进行字符串的截取,把第一个字符截取出来,放到最后一个位置即可;
    3.为了实现点击下按钮。自动截取,需要把上步骤放到一个定时器里。

    1. <template>
    2. <div id="app">
    3. <input @click="handleClick" type="button" value="浪起来">
    4. <input type="button" value="低调" @click="stop">
    5. <h4>{{msg}}</h4>
    6. </div>
    7. </template>
    8. <script>
    9. export default {
    10. name: 'app',
    11. data(){
    12. return{
    13. msg:"猥琐发育,别浪~~",
    14. intervarlId:null
    15. }
    16. },
    17. methods:{
    18. handleClick(){
    19. if(this.intervarlId != null) return;
    20. // 箭头函数解决函数内部this指向问题
    21. this.intervarlId= setInterval(()=>{
    22. // 获取第一个字符
    23. var start = this.msg.substring(0,1);
    24. console.log(start);
    25. // 获取后面的所有字符
    26. var end = this.msg.substring(1);
    27. // 重新拼接得到新的字符串,并赋值给this.msg
    28. this.msg = end + start;
    29. },400)
    30. },
    31. stop(){
    32. clearInterval(this.intervarlId);
    33. this.intervarlId = null;
    34. }
    35. }
    36. }
    37. </script>