vue 跑马灯效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<button @click="lang">浪起来</button>
<button @click="stop">别浪</button>
</div>
</body>
<script src="vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'猥琐发育,别浪~~~~',
intervalId:null
},
methods:{
lang() {
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)
},stop(){
clearInterval(this.intervalId)
this.intervalId=null;
}
}})
</script>
</html>