当前位置 博文首页 > wsc的博客：基于Vue.js实现跑马灯效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div id="app">
<div>
<button type="button" @click="start()">跑起来</button>
<button type="button" @click="end()">低调</button>
</div>
<div>{{msg}}</div>
</div>
<script type="text/javascript">
var vue=new Vue({
el:"#app",
data:{
msg:"发育,猥琐发育，别浪！！！",
time:"22"
},
methods:{
start:function(){
this.time=setInterval(()=>{
var head=this.msg.substring(0,1);
var tail=this.msg.substring(1);
this.msg=tail+head;
},400);
},
end:function(){
clearInterval(this.time)
}
}
})
</script>
</body>
</html>?
