Vue 简单应用 定时器
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
</head><script src="../demo3/lib/vue-2.4.0.js"></script>
<body>
<div id="app">
<input type="button" value="开始" @click="start">
<input type="button" value="结束" @click="stop">
<p>{{info}}</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
info:"床前明月光，疑是地上霜。举头望明月，低头思故乡。",
intervalId:null
},
methods:{
start(){
//判断器不等于空,直接return,不在执行下面的语句
if(this.intervalId!=null){
return;
}
//()=> Es6提供的箭头函数
this.intervalId=setInterval(()=>{
this.info=this.info.substring(1)+this.info.substring(0,1)；
},500)
},
stop(){
// 清除定时器
clearInterval(this.intervalId)
// 定时器设置为空
this.intervalId=null;
}
}
})
</script>
</body>
</html>
扫一扫
7606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
