<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<!-- 点击事件调用move函数 -->
<button type="button" @click="move()">动</button>
<!-- 点击事件调用stop函数 -->
<button type="button" @click="stop()">停</button>
</div>
</body>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
msg:"喜羊羊，美羊羊，懒羊羊，沸羊羊，暖羊羊，",
ind:null
},
methods:{
move(){
if(this.ind){return};
// 切割第一个字，将其添加到尾部实现动起来的效果
this.ind=setInterval(()=>{
var arr=this.msg.split('');
arr.push(arr.shift());
this.msg=arr.join('')
},100)
},
stop(){
// 清除计时器
clearInterval(this.ind);
this.ind=null
}
}
})
</script>
</html>
|