下面是一段跑马灯效果的代码:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>VueBaseCode</title><script src="./lib/vue.js"></script>
</head><body><div id="app"><input type="button" value="跑起来" @click="run"><input type="button" value="停下来" @click="stop"><h3>{{msg}}</h3></div><script>var vm = new Vue({el: '#app',data: {msg: '好好学习,天天向上。',intervalId: null},methods: {run() {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>
</body></html>
这里我们通过“@”来绑定方法,通过“:”来绑定h3内容。
在data对象里面添加了一个setInterval方法的引用intervalId,并设置初始值为null,在run方法里面我们将SetInterval方法的引用赋给了intervalId,在setInterval定时器里面,我们定义了匿名方法,该方法将msg的开头第一个字母和其后面的字符串分别取出,并交换头尾相加,并将其值重新赋给msg。
在stop方法里面,我们停止了定时器,并将interval设置为null。