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>
本篇博客为本人学习Vue时的详细笔记，如有错误之处，还望各位指正。
文章为原创，如要转载请注明出处
