- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>
- Title
- </title>
- <script src="js/vue-2.4.0.js">
- </script>
- </head>
- <body>
- <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 实例对象
- const vm = new Vue({
- el: '#app',
- data: {
- msg: '猥琐发育, 别浪~',
- intervalId: null // 在 data 上定义 定时器 Id
- },
- methods: {
- lang() {
- //console.log(this.msg);
- if (this.intervalId != null) return;
- //const _this=this;
- this.intervalId = setInterval(() = >{ //=> 箭头外部的指示永远和内部相同 this
- // 获取到头的第一个字符
- 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
- this.intervalId = null;
- },
- }
- })
- </script>
- </body>
- </HTML>
跑马灯案例
来源: http://www.bubuko.com/infodetail-2967978.html