Vue实现跑马灯效果
程序员文章站
2022-04-09 15:58:35
本文实例为大家分享了vue实现跑马灯效果的具体代码,供大家参考,具体内容如下实现的业务逻辑1、给[嗨起来]按钮,绑定一个点击事件 v-on(@)。2、在按钮的事件函数处理中,写相关的业务逻辑:拿到ms...
本文实例为大家分享了vue实现跑马灯效果的具体代码,供大家参考,具体内容如下
实现的业务逻辑
1、给[嗨起来]按钮,绑定一个点击事件 v-on(@)。
2、在按钮的事件函数处理中,写相关的业务逻辑:拿到msg的字符串,后调用字符串中的substring来进行字符串的截取操作,放到最后一个位置。
3、为了实现点击下按钮,自动截取功能,需要将步骤2中代码放到一个定时器中。
实现代码如下:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <script src="vue.min.js"></script> </head> <body> <div id="app"> <input type="button" value="嗨起来" @click="bejin"> <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 }, methods:{ bejin(){ if(this.intervalid!=null) return //箭头解决this指向问题,由内部的指向外部 this.intervalid=setinterval(()=>{ //获取到头的第一个字符 var start=this.msg.substring(0,1) //获取到后面的所有字符 var end=this.msg.substring(1) //重新拼接得到新的字符串,并赋值给this.msg this.msg=end+start //注意:vm实例,会监听自己身上data中所有数据的改变,只要数据一发生变化,就会把最新数据,从data上同步到页面中去 },50) }, stop(){//停止计时器 clearinterval(this.intervalid) //每当清除了定时器后,需要重新把intervalid置为null this.intervalid=null; } } }) </script> </body> </html>
更多文章可以点击《vue.js前端组件学习教程》学习阅读。
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。