<div id="app">
<input type="button" value="开始" @click="gooo">
<input type="button" value="停止" @click="stoppp">
<h4>{{ msg }}</h4>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'123~456~789',
intervalId:null
},
methods: {
gooo(){
/*如果有定时器正在跑,直接rutrun出去,避免多次点击开始按钮后跑马灯越跑越快*/
if (this.intervalId != null){
return
}
this.intervalId = setInterval( () => {
var start = this.msg.substring(0,1)
var end = this.msg.substring(1)
this.msg = end + start
},400)
},
stoppp(){
clearInterval(this.intervalId)
/*每当清除定时器后,需要重新把intervalId重置为null*/
this.intervalId = null
}
}
})
</script>
09-25