Vue如何实现简易跑马灯效果

魁首哥

作者

Vue如何实现简易跑马灯效果

本文小编为大家详细介绍“Vue如何实现简易跑马灯效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue如何实现简易跑马灯效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

Vue跑马灯效果：

1.分析

a.点击"加油"按钮绑定一个点击事件，使用v-on或者缩写:"@"
b.在按钮的事件处理函数中，写相关的业务逻辑代码：拿到 msg 字符串，然后调用字符串的 substring 来进行字符串的截取操作，把第一个字符截取出来，放到最后一个位置即可；
为了实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去；

2.实现

2.1、绑定事件

<inputtype="button"value="加油"@click="lang"><inputtype="button"value="低调"@click="stop"><script>varvm=newVue({el:'#app',data:{msg:'加油，小强，你最棒~~！',intervalId:null//在data上定义定时器Id},methods:{lang(){},stop(){}}})</script>

2.2、动态截取加定时

varvm=newVue({el:'#app',data:{msg:'加油，小强，你最棒~~！',intervalId:null//在data上定义定时器Id},methods:{lang(){//获取到头的第一个字符//thisif(this.intervalId!=null)return;this.intervalId=setInterval(()=>{varstart=this.msg.substring(0,1)//获取到后面的所有字符varend=this.msg.substring(1)//重新拼接得到新的字符串，并赋值给this.msgthis.msg=end+start},400)//注意：VM实例，会监听自己身上data中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从data上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】},stop(){}}})

2.3、取消定时器

stop(){//停止定时器clearInterval(this.intervalId)//每当清除了定时器之后，需要重新把intervalId置为nullthis.intervalId=null;}

2.4、完整代码

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><!--1.导入Vue包--><scriptsrc="./lib/vue-2.4.0.js"></script></head><body><!--2.创建一个要控制的区域--><divid="app"><inputtype="button"value="加油"@click="lang"><inputtype="button"value="低调"@click="stop"><h5>{{msg}}</h5></div><script>//分析：//1.给【浪起来】按钮，绑定一个点击事件v-on@//2.在按钮的事件处理函数中，写相关的业务逻辑代码：拿到msg字符串，然后调用字符串的substring来进行字符串的截取操作，把第一个字符截取出来，放到最后一个位置即可；//3.为了实现点击下按钮，自动截取的功能，需要把2步骤中的代码，放到一个定时器中去；//注意：在VM实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须通过this.数据属性名或this.方法名来进行访问，这里的this，就表示我们new出来的VM实例对象varvm=newVue({el:'#app',data:{msg:'加油，小强，你最棒~~！',intervalId:null//在data上定义定时器Id},methods:{lang(){//console.log(this.msg)//获取到头的第一个字符//thisif(this.intervalId!=null)return;this.intervalId=setInterval(()=>{varstart=this.msg.substring(0,1)//获取到后面的所有字符varend=this.msg.substring(1)//重新拼接得到新的字符串，并赋值给this.msgthis.msg=end+start},400)//注意：VM实例，会监听自己身上data中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从data上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】},stop(){//停止定时器clearInterval(this.intervalId)//每当清除了定时器之后，需要重新把intervalId置为nullthis.intervalId=null;}}})</script></body></html>

最终效果