php图片走马灯,Vue实现跑马灯效果

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

实现的业务逻辑

1、给[嗨起来]按钮，绑定一个点击事件 v-on(@)。

2、在按钮的事件函数处理中，写相关的业务逻辑：拿到msg的字符串，后调用字符串中的substring来进行字符串的截取操作，放到最后一个位置。

3、为了实现点击下按钮，自动截取功能，需要将步骤2中代码放到一个定时器中。

实现代码如下：

Document

{{msg}}

//注意：在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;

}

}

})

更多文章可以点击《Vue.js前端组件学习教程》学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

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