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

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

【Vue案例一】实现跑马灯效果相关推荐

黑马vue---10-11、Vue实现跑马灯效果
黑马vue---10-11.Vue实现跑马灯效果一.总结一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件 v-on @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...
Vue实现跑马灯效果以及封装为组件发布
Vue 实现跑马灯效果前言最近做活动需要做跑马灯效果,其他同事也有实现,本来打算复制他们代码,发现都是使用setInterval实现了,也没有封装为组件,所以自己用CSS3实现了一下跑马灯效果,并 ...
分别用Js和vue实现跑马灯效果
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...
【前端框架学习】第一次实验跑马灯效果的制作
一.什么是跑马灯效果每隔一段时间,排在首位的字符会被后一个字符所代替,而首位字符会被移到队尾. 二.实验过程 1.首先创建控制区域与vue实例: <div id="app" ...
跑马灯抽奖js php,文字跑马灯效果的完成
文字跑马灯效果的完成发表于2019-06-09 21:14| 次阅读| 来源网络整理| 作者session 摘要:跑马灯效果在很多页面上也常常出现,本文次要为大家具体引见微信小程序完成文字跑马灯效果 ...
HarmonyOS 实现跑马灯效果
跑马灯效果实现效果图注意事项: HarmonyOS里面Text由于multiple_lines默认为false 所以我们可以直接来设置跑马灯效果,当想设置Text换行的时候设置multiple_li ...
Android 使用 ellipsize 实现文字横向移动效果(跑马灯效果)
实现的效果图如下 ellipsize 可以设置跑马灯效果具体代码设置如下 <TextViewandroid:layout_width="match_parent"andro ...
TextView实现跑马灯效果
经常使用TextView会出现这样的情况,有限的空间内只能写一行,然后导致好多文字被"..."表示了,如图: 而且有可能是重要信息被隐藏了,于是就有了跑马灯效果. 实现方式很简单: ...
单行文字垂直/水平跑马灯效果
需求描述接到的需求是这样的:跑马灯效果一次展示一行文字循环滚动文字滚动到视野中停留一秒后滚出. 静态效果如下图,文字从下往上或者从右往左滚动,滚动到此位置时停留一秒(不会传动图... 网络上有 ...