用vue简单的做一个跑马灯效果

最新推荐文章于 2025-06-25 09:02:16 发布

ikun不解释

最新推荐文章于 2025-06-25 09:02:16 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：跑马灯

本文链接：https://blog.csdn.net/qq_42309685/article/details/99462596

vue 专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何使用Vue.js创建动态跑马灯效果。通过设置定时器不断将字符串首字符移至末尾，实现文字滚动。代码示例中包含动起来和停下来的按钮控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路是这样的：
一般制作跑马灯，都是设置一个定时器，不断地将字符串中的第一个字符添加到字符串末尾
代码如下：

<div id="app">
	<input type="button" value="动起来" @click = "active">
	<input type="stop" value="停下来" @click = "stop">
	<h4>{{msg}}</h4>
</div>
//记得引入vue库
<script>
var vn = new Vue({
	el : '#app',
	data : {
		msg : '这是一个跑马灯',
		timer = null
	},
	methods : {
		active() {
			if(this.timer !== null) return//防止多次点击动起来的按钮
			this.timer = setInterval(()=>{
				var start = this.msg.substring(0,1)
				var end = this.msg.substring(1)
				this.msg = end + start
			},300)
		},
		stop() {
			clearInterval(this.timer)
			this.timer = null
		}
	}
})
</script>

效果如下：
跑马灯