初学VUE 走马灯效果
程序员文章站
2022-07-09 21:10:27
很简单的走马灯效果 关注公众号 WEB前端大澳 领取资料 ......
<!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会指向window 所以我用了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前端大澳 领取资料
下一篇: C语言学习教程,用C语言编写扫雷游戏