需求
使用v-on
、v-click
来编写一个跑马灯的效果示例。
效果示例如下:
通过两个按钮控制下面的字符串在一定的区域内循环往左滚动,形成跑马灯的效果。
实现思路
- 编写两个按钮start 和 stop,并且使用
v-on
进行click
监听。分别绑定start_run()
和 stop_run()
方法。 -
start_run()
方法首先需要获取当前显示的字符串Hello world, this is funny
,然后使用substring(开始截取的字符位置, 停止截取的字符位置)
截取字符串,将第一个字符拼接到最后去。 - 设置一个定时器
setInterval()
控制不断截取字符,并逐个拼接到最后,形成滚动效果。 -
stop_run()
方法则是执行停止定时器clearInterval()
即可。
实现:编写两个按钮以及字符串渲染
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- start按钮 -->
<input type="button" value="start" @click="start">
<!-- stop按钮 -->
<input type="button" value="stop" @click="stop">
<!-- 字符串内容 -->
<h2 v-text="msg"></h2>
</div>
<!-- 1.导入vue.js库 -->
<script src="lib/vue.js"></script>
<script>
// 2. 创建一个Vue的实例
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello World, this is funny!'
},
methods:{
start(){
alert("start");
},
stop(){
alert("stop");
}
}
})
</script>
</body>
</html>
浏览器显示如下:
编写start_run()实现字符串截取以及颠倒拼接
多次点击start按钮,显示如下:
编写start_run()增加setInterval()定时截取字符串
在浏览器执行一下,发现报错,如下:
在这里提示substring
方法未定义,其实这是一个this
指针的问题。因为当将截取字符串的操作方法放入定时器的function()
中,那么此时this
指针则是指向function
,而function()
并没有定时msg
,由于找不到msg
,进而提示找不到substring
方法。
解决这个问题可以使用箭头函数=>,将外部的this指针赋值给function()方法中。
如下:
测试打开浏览器显示如下:
编写stop_run()方法,停止定时器
如果要停止定时器,那么就要记录定时器的id信息,用于停止。那么这个定时器的id就需要是一个全局变量,提供stop_run()和start_run()方法都可以访问到。
浏览器点击start按钮之后,再点击stop按钮,停止运行,如下:
但是这里其实有个BUG,如果多次点击start按钮,那么将会创建多个定时器,而记录定时器id只会记录最后一个创建的定时器,那么则无法全部停止。
那么这时候就要做一些判断来限制启动定时器,并且关闭定时器之后,需要重置一下定时器id为null。
解决多次点击start按钮的BUG
此时无论点击多少次start按钮,只要点击一次stop按钮就可以停止定时器了。