Vue实战项目1：跑马灯效果

一、效果预览

在这里插入图片描述

二、编写思路

两个按钮用于启动和停止，绑定点击事件，使用v-on，可以简写为@

<input type="button" value="跑起来" @click="run"/>
<input type="button" value="停下来" @click="stop"/>

在按钮的事件处理函数中，首先拿到msg字符串，然后调用字符串的substring来进行字符串截取操作，即，截取第一个字符，放到最末尾处。

var start = this.msg.substring(0, 1)
var end = this.msg.substring(1)
this.msg = end + start

使用定时器实现自动重复截取和拼接的功能。

setInterval(() => {var start = this.msg.substring(0, 1)var end = this.msg.substring(1)this.msg = end + start
},200)

为了确保定时器不会重复叠加开启，在data中定义intervalId，确保定时器状态

<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},200)},stop() {clearInterval(this.intervalId)this.intervalId = null}}})
</script>

三、整体代码展示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>跑马灯效果</title><script src="lib/vue-2.4.0.js"></script></head><body>		<div id="app"><input type="button" value="跑起来" @click="run"/><input type="button" value="停下来" @click="stop"/><h4>{{ msg }}</h4></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},200)},stop() {clearInterval(this.intervalId)this.intervalId = null}}})</script></body>
</html>