【Vue案例】跑马灯效果
程序员文章站
2022-03-03 09:40:23
...
在Vue学习笔记（一）中我们已经学过了 v-on 这个指令，可以用来实现事件的绑定，本文我们利用 v-on 来实现一个简单的跑马灯效果，就是如下这种效果：
第一步：导入Vue包
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
第二步：创建一个要控制的区域
<div id="app">
<button>开始</button>
<button>停止</button>
<h1>{{ msg }}</h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '加油 ~ 加油 ~ 你最棒！！！',
},
</script>
第三步：绑定事件
使用 v-on 或者其缩写"@"，给"开始"和“停止”按钮分别绑定一个点击事件。
<button @click="begin">开始</button>
<button @click="stop">停止</button>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '加油 ~ 加油 ~ 你最棒！！！',
},
methods: {
begin() {
},
stop() {
}
}
})
</script>
第四步：begin() 事件处理
拿到 msg 字符串，然后调用字符串的 substring() 方法来进行字符串的截取操作，把第一个字符截取出来，放到最后一个位置即可。为了实现点击按钮自动截取的功能，需要设置一个定时器。
begin() {
this.intervalId = setInterval(() => {
var start = this.msg.substring(0, 1)
var end = this.msg.substring(1)
this.msg = end + start
}, 200)
},
第五步：stop() 事件处理
想要停止跑马灯效果，只需要清除定时器即可。
stop() {
clearInterval(this.intervalId)
}
第六步：在data上定义定时器Id
var vm = new Vue({
el: '#app',
data: {
msg: '加油 ~ 加油 ~ 你最棒！！！',
intervalId: ''
}
})
注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从data 上同步到页面中去。【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="app">
<button @click="begin">开始</button>
<button @click="stop">停止</button>
<h1>{{ msg }}</h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '加油 ~ 加油 ~ 你最棒！！！',
intervalId: ''
},
methods: {
begin() {
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)
}
}
})
</script>
</body>
</html>
上一篇： java集合框架备忘
下一篇： JAVA守护线程备忘