实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跑马灯的实现</title>
<script src="vue.js"></script>
</head>
<body>
<!--
分析:
1.给按钮绑定点击事件, v-on
2.在按钮的处理处理函数中,写相关的业务逻辑代码:拿到msg字符串,然后调用字符串的subString进行字符串的截取操作
3.为了实现点击按钮,自动截取的功能,需要把步骤2的代码放到一个定时器中
-->
<div id="app">
<input type="button" value="跑起来" @click="start">
<input type="button" value="停止" @click="end">
<h4>{{msg}}</h4>
</div>
<script>
var em=new Vue({
el:'#app',
data:{
msg:'前端框架------Vue.js',
intervalId:null //在data上定义 定时器Id
},
//注意在vm实例中,如果想要获取data上的数据,或者想要调用methods中的方法,必须通过this
methods:{
start(){
/*
var _this=this
setInterval(function(){
//获取到第一个字符
var startStr=_this.msg.substring(0,1)
//获取到后面的所有字符
var endStr=_this.msg.substring(1)
//重新赋值给msg
_this.msg=endStr+startStr
},400)
*/
if(this.intervalId !=null) return;
this.intervalId=setInterval(() =>{
//获取到第一个字符
var startStr=this.msg.substring(0,1)
//获取到后面的所有字符
var endStr=this.msg.substring(1)
//重新赋值给msg
this.msg=endStr+startStr
},100)
//注意:vm实例会监听自己身上data中多有数据的改变,只要数据发生变化,会自动把最新的数据从data上同步到页面中
//好处:我们只需要关心数据,不需要考虑如何重新渲染DOM页面
},
end(){
clearInterval(this.intervalId)
this.intervalId=null;
}
}
})
</script>
</body>
</html>