利用vue做出简易的跑马灯效果

最新推荐文章于 2025-03-26 15:28:30 发布

爱泡澡的小萝卜

最新推荐文章于 2025-03-26 15:28:30 发布

阅读量275

点赞数

分类专栏：前端知识文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/stphencurry/article/details/115051201

版权

前端知识专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用 Vue.js 实现的文字滚动效果案例。通过定时器功能，将字符串的第一个字符移动到最后，形成循环滚动的视觉效果，并提供了启动和暂停功能。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button @click="active">滚动</button>
			<button @click="pause">停止</button>
			<h4>{{msg}}</h4>
		</div>
		<script src="vue.js"></script>
		<script>
			// vm实例中调用data的数据,或者调用methods的方法，必须通过this调用 this.属性名 / this.方法名
			var vue = new Vue({
				el:'#app',
				data:{
					msg: '今晚你吃了吗',
					intervalId: null
				},
				methods:{
					active() {
						// 定时器
						// 箭头函数内部this和外部一致，都指向vm实例
						
						// 防止定时器一直在执行，越来越快
						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
						}, 400)
						// console.log(this.msg)
					},
					pause() {
						clearInterval(this.intervalId)
						this.intervalId = null
					}
				}
			})
			
			// 分析:
			// 1.给按钮绑定事件
			// 2.在按钮事件处理函数中，写入相关的业务逻辑代码： 拿到msg字符串，然后 
			// 调用字符串的substring来截取字符串， 把第一个字符串截取出来放到最后一个
			// 3.为了实现点击后自动截取， 需要吧步骤2放入到定时器去
		</script>
	</body>
</html>