<body> <!-- 2. 创建一个要控制的区域 --> <div id="app"> <input type="button" value="浪起来" @click="lang"> <input type="button" value="低调" @click="stop"> <!-- 插值表达式 --> <h4>{{ msg }}</h4> </div> <script> // 注意：在 VM实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法 // 必须通过 this.数据属性名 或 this.方法名 来进行访问 // 这里的this，就表示 我们 new 出来的 VM 实例对象 var vm = new Vue({ el: '#app', data: { msg: '猥琐发育，别浪~~！', intervalId: null // 在data上定义 定时器Id }, methods: { lang() { if (this.intervalId != null) return; // 判断定时器有没有在运行，在运行 则直接返回。避免重复点击导致多个定时器同时生效。 // this.intervalId != null 表示定时器里的内容不是空值，所以是在运行。 this.intervalId = setInterval(() => { // 注意箭头函数用法和特点，ES6再复习一下。 var start = this.msg.substring(0, 1) // 获取到 后面的所有字符 var end = this.msg.substring(1) // 重新拼接得到新的字符串，并赋值给 this.msg this.msg = end + start }, 400) // 注意： VM实例，会监听自己身上 data 中所有数据的改变， // 只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去； // 【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】 }, stop() { // 停止定时器 clearInterval(this.intervalId) this.intervalId = null; // 每当清除了定时器之后，需要重新把 intervalId 置为 null // 否则下一次点击开启定时器时，定时器的值不是null，就无法运行新一轮定时器。 // 疑问： 清除了定时器之后， 定时器的值是？？？ } } }) </script> </body>