1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7. </head>
    8. <body>
    9.     <div id="app">
    10.         <input type="button" @click="jump()" value="浪起来">
    11.         <input type="button" @click="stop()" value="别浪">
    12.         <h4>{{msg}}</h4>
    13.     </div>
    14.     <script src="./lib/vue.js"></script>
    15.     <script>
    16.         // 在vm实例中,想要调用data上的数据,或者想要调用methods中的方法,必须通过this.数据属性名 或者this.方法名字
    17.         var vm = new Vue({
    18.             el:"#app",
    19.             data:{
    20.                 msg:'猥琐发育,别浪~~',
    21.                 setIntervalid:null,
    22.             },
    23.             methods: {
    24.                 jump(){
    25.                     if(this.setIntervalid != null){
    26.                         return
    27.                     }
    28.                     this.setIntervalid = setInterval( () => {
    29.                         var start = this.msg.substring(0, 1)
    30.                         var end = this.msg.substring(1)
    31.                         var newstr = end + start
    32.                         this.msg = newstr
    33.                         console.log(this.msg)
    34.                     },100)
    35.                 },
    36.                 stop(){
    37.                     // var interval = setInterval(this.setIntervalid, 2000); //启动,func不能使用括号
    38.                     clearInterval(this.setIntervalid);//停止
    39.                     this.setIntervalid = null;
    40.                 }
    41.             },
    42.         })
    43.     </script>
    44. </body>
    45. </html>

    1.gif