vue 跑马灯效果
程序员文章站
2022-03-03 09:34:41
...
业务逻辑
逻辑
1.给按钮绑定事件
2.在按钮事件处理函数中，
写相关的业务逻辑：拿到msg 字符串，然后调用字符串中的sbustring 来进行字符串的截取操作，把第一个字符截取出来，放在最后一个位子
3.为了实现点击按钮，自动截取的功能需要把2.步骤中的代码放在一个定时器中
4.点击停止，停止定时器
初始化 开始跑
下面是源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跑马灯效果</title>、
<!-- 导入vue.js 2.6.10-->
<script src="js/vue.js"></script>
</head>
<body>
<!-- 创建一个控制区域 -->
<div id="app">
<!-- 按钮控制 -->
<input type="button" @click="onClickStart" value="开始"/>
<input type="button" @click="onClickEnd" value="停止"/>
<h3>{{msg}}</h3>
</div>
<script>
/* 定义实例
注意：在app实例中，如何要获取data里面的数据，或者想要调用methods中的方法，
必须通过this.数据属性名或者this.方法名 来进行方法，这里的this即表示我们new 出来的app实例对象
*/
var app = new Vue({
el:'#app',
data:{
msg:'猥琐发育，别浪啊~~~！',
Interval:null //在data上定义一个变量
},
methods:{
/* 开始 ES6 写法*/
onClickStart(){
if(this.Interval != null){
return
}
/* 箭头函数的写法 内部的指向外部*/
this.Interval = setInterval(() => {
//获取到头的字符
var start = this.msg.substring(0,1);
//获取到最后的所有字符
var end = this.msg.substring(1);
//拼接---数据双向绑定:只需要关系数据,不需要重新渲染页面
this.msg = end + start;
},400)
/* 箭头函数相当于
var _this = this
setInterval(function(){
var start = _this.msg.substring(0,1);
var end = _this.msg.substring(1);
_this.msg = end + start;
},400)
*/
},
/* 结束 ES6 写法*/
onClickEnd(){
clearInterval(this.Interval);
/* 每当清除定时器 ，重新赋值Interval为null*/
this.Interval = null
}
}
})
</script>
</body>
</html>
上一篇： 比较两个二叉树是否相同
下一篇： vue使用节流函数的踩坑实例指南