您的位置：首页 > Web前端 > Vue.js

【Vue案例一】实现跑马灯效果

2020-08-27 17:40 926 查看

在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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航