基于VUE实现的跑马灯效果案例
逻辑分析
1.给两个按钮添加v-on的点击事件，此处用的省略写法：@click
2.核心思想就是对字符串message进行截取，每次截取将最后一个字放到最前面，剩下的字放到最后面
3.给点击开启事件增加一个定时器，就可以实现跑马灯效果
4.点击取消跑马灯效果就是讲之前的定时器清除即可
VUE管理区域
<div id="app">
<input type="button" value="跑起来" @click="run">
<input type="button" value="停止" @click="stop">
<h4 v-cloak>{{message}}</h4>
</div>
js vue实例
<script src="../js/vue.js"></script>
<script>
var vue = new Vue({
el:"#app",
data:{
message:"这是跑马灯，跑马灯~~~!",
intervalId:null //将intervalId在初始data中设为null
},
methods:{
run(){
if(this.intervalId != null) return;
this.intervalId =setInterval (() =>{
//字符串截取
var start = this.message.substring(0,1)
var end = this.message.substring(1)
//调换位置
this.message = end+start
},400)
// 注意：VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从 data 上同步到页面中去；【好处：程序员指需要关心数据，不需要考虑如何重新渲染DOM页面】
},
stop(){
//清除计时器
clearInterval(this.intervalId)
//每次清除计时器后，将计时器 intervalId 重新设为空
this.intervalId = null
}
}
})
</script>
经测试，最终可实现跑马灯效果
