vue小案例(跑马灯)

Posted 2021-02-13 mound

html模块！！

<div id="app">
<h4> {{msg}} </h4>
//开始跑马状态
<input type="button" value="飘" @click=‘lang‘>
//停止
<input type="button" value="定住" @click=‘stop‘>
</div>

　　

 script模块

var vm =new Vue({
el:‘#app‘,
data:{
msg:‘主要是开心！加油~~~！‘,
intervalId:null,//在data定义 定时器Id
},
methods:{
lang(){
//判断当前这个跑马是否有点击跑马，有则不执行下面。防止多次点击
if(this.intervalId!==null) return;
// console.log(this.msg)
this.intervalId=setInterval(() => { //开启定时器 
var start=this.msg.substring(0,1)
var end=this.msg.substring(1)
//获取新的字符串，重新拼接，重新赋值给 this.msg
this.msg =end+start
},500) 
/*注意
Vue 实例，是会监听自己身上的 data中所有数据的改变，只要数据发生改变，就会把最新的数据同步到页面上
优点：这样子就不用考虑重新渲染DOM页面，只要把数据弄好就ojbk了


*/ 
},
stop(){ //停止定时器
clearInterval(this.intervalId)
console.log(31)
this.intervalId=null //每当停止定时器后 重新赋值维null 
}
}
})