- <!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>
- Document
- </title>
- <script src="./js/vue.js">
- </script>
- </head>
- <body>
- <div id="a">
- <input type="button" value="浪起来" @click='lang'>
- <input type="button" value="稳住" @click='tingzhi'>
- <p>
- {{ msg }}
- </p>
- </div>
- </body>
- <script>
- // vm 上的数据发生变化 就会把新的数据从 data 中同步到页面中去
- const vm = new vue({
- el: '#a',
- data: {
- msg: '大家一起嗨起来~~~!',
- id: null,
- },
- methods: {
- lang() {
- // vue 中想要获取上个局部数据 要用到 this 但是这里有用到了定时器 this 会指向 Windows 所以我用了 es6 中的 => 函数
- if (this.id != null) return;
- // 要给一个点击的判断 要不然就会出现多次运行定时器 停止就不会管用了
- this.id = setInterval(() = >{
- const q = this.msg.substring(0, 1);
- const h = this.msg.substring(1);
- // 把截取的字符创拼接到 msg 中
- this.msg = h + q;
- },
- 100)
- },
- tingzhi() {
- clearInterval(this.id);
- // 要把初始值在赋给 msg 要不然定时器不会再执行
- this.id = null;
- }
- }
- })
- </script>
- </HTML>
很简单的走马灯效果
关注公众号 web 前端大澳 领取资料
来源: http://www.bubuko.com/infodetail-3257728.html