第一个VUE，如何实现跑马灯效果
1、打开Hbuilder、建立一个项目（引入vue.js的包，vue的官网可直接下载）、目录结构如下
2、用<script src="js/vue.js"></script>引入vue.js
3、建立两个按钮<input type="button" value="start" /><input type="button" value="stop" />
4、添加vue的渲染
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'实现跑马灯效果'
}
})
</script>
5、添加click事件，以及字符串拆分，实现大致效果，如图
6、设置定时器、以及暂时效果
7、防止重复点击定时器
8、代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试第一个VUE(跑马灯效果)</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="start" @click="start"/>
<input type="button" value="stop" @click="stop"/>
<h4>{{msg}}</h4>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'实现跑马灯效果',
intervalId:null
},
methods:{
start(){
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;
},300)
},
stop(){
clearInterval(this.intervalId)
this.intervalId=null;
}
}
})
</script>
</html>