一、分析
<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() { // console.log(this.msg) // 获取到头的第一个字符 // this 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 }, 400) // 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】 }, stop() { // 停止定时器 clearInterval(this.intervalId) // 每当清除了定时器之后，需要重新把 intervalId 置为 null this.intervalId = null; } } }) </script> </body>
三、效果
原文：https://www.cnblogs.com/wangyuxue/p/11791092.html