vue实现跑马灯效果

Posted 2021-12-19 温L

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue实现跑马灯效果相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>msg</p>
			<!-- 点击事件调用move函数 -->
			<button type="button" @click="move()">动</button>
			<!-- 点击事件调用stop函数 -->
			<button type="button" @click="stop()">停</button>
		</div>
	</body>
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		new Vue(
			el:"#app",
			data:
				msg:"喜羊羊，美羊羊，懒羊羊，沸羊羊，暖羊羊，",
				ind:null
			,
				
			methods:
				move()
					if(this.ind)return;
					// 切割第一个字，将其添加到尾部实现动起来的效果
					this.ind=setInterval(()=>
						var arr=this.msg.split('');
						arr.push(arr.shift());
						this.msg=arr.join('')
					,100)
				,
				stop()
					// 清除计时器
					clearInterval(this.ind);
					this.ind=null
				
			
		)
	</script>
</html>

以上是关于vue实现跑马灯效果的主要内容，如果未能解决你的问题，请参考以下文章