欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue实现跑马灯效果

程序员文章站 2022-04-09 15:58:35
本文实例为大家分享了vue实现跑马灯效果的具体代码,供大家参考,具体内容如下实现的业务逻辑1、给[嗨起来]按钮,绑定一个点击事件 v-on(@)。2、在按钮的事件函数处理中,写相关的业务逻辑:拿到ms...

本文实例为大家分享了vue实现跑马灯效果的具体代码,供大家参考,具体内容如下

实现的业务逻辑

1、给[嗨起来]按钮,绑定一个点击事件 v-on(@)。
2、在按钮的事件函数处理中,写相关的业务逻辑:拿到msg的字符串,后调用字符串中的substring来进行字符串的截取操作,放到最后一个位置。
3、为了实现点击下按钮,自动截取功能,需要将步骤2中代码放到一个定时器中。

Vue实现跑马灯效果

实现代码如下:

<!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实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关标签: vue 跑马灯