vue实现跑马灯效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div >
			<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>

 

来源url
栏目