Vue实现跑马灯效果
更新时间：2022年04月07日 11:26:12 作者：巫笙公子
这篇文章主要为大家详细介绍了Vue实现跑马灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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实战教程》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家分享一篇对vue里函数的调用顺序介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Vue3中的Refs和Ref，文章围绕Vue3中的Refs和Ref得相关资料应用举例烦人方式展开详细内容,需要的朋友可以参考一下2021-11-11
这篇文章主要介绍了Vue中的插件：Vuex。本文将围绕它的优缺点、使用场景和示例展开详细的说明，感兴趣的小伙伴可以跟随小编一起了解一下2022-01-01
这篇文章主要为大家详细介绍了vue3封装计时器组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
vue3+elementui-plus实现一个接口上传多个文件功能
这篇文章主要介绍了vue3+elementui-plus实现一个接口上传多个文件,先使用element-plus写好上传组件，然后假设有个提交按钮，点击上传文件请求接口，本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-07-07
这篇文章主要介绍了Vue切换组件实现返回后不重置数据,保留历史设置操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
vue或react项目生产环境去掉console.log的操作
这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,这篇文章主要给大家介绍了关于如何在Vue 3中扩展Vue Router链接的相关资料,需要的朋友可以参考下2021-06-06
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
这篇文章主要介绍了详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
今天小编就为大家分享一篇解决Vue.js父组件$on无法监听子组件$emit触发事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论