跑马灯 就是文字 不停的 循环显示, 显示效果如下:
思路如下:
- 创建 两个button ,一个显示文字的标签
- 让标签的文字 取自 vue 对象 data 里的msg
- 写个方法放到vue 对象 methods 里, 让第一个字符 拼接到 后边
- button 绑定上边的方法
- 把上边的方法用 setInterval 方法进行迭代 ,并把返回值保存在data 里(status)
- 取到data 里 setInterval 的值 , 写个关闭方法。
- 解决 不停点击 ,也生效的问题,
默认status 为null, 写个判断 当为null 的时候继续, 不为null 直接阻断
,如果关闭 也设置status 为null
直接上代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
</head>
<body>
<div id="pp">
<input type="button" value= "Start" v-on:click="show" >
<input type="button" value="Close" v-on:click="close">
<h1>{{msg}}</h1>
</div>
<div>
<script>
var vue=new Vue(
{
el:'#pp',
data:{
msg: '开始浪起来,浪一个浪~~',
status:null,
},
methods:{
show: function (){
if (this.status != null){return;}
this.status= setInterval(()=>{
var start_string=this.msg.substring(0,1);
var end_string=this.msg.substring(1);
this.msg=end_string+start_string;
console.log(this.msg)
},500)
},
close: function(){
clearInterval(this.status);
this.status=null
}
}
}
)
</script>
</div>
</body>
</html>