vue跑马灯效果

最新推荐文章于 2022-06-14 22:24:26 发布

写Bug的老王

最新推荐文章于 2022-06-14 22:24:26 发布

阅读量463

点赞数 1

分类专栏：跑马灯文章标签： vue.js javascript 前端 vue

本文链接：https://blog.csdn.net/wsq88888888/article/details/121085088

版权

跑马灯专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p>{{msg}}</p>
			<button type="button" @click="run()">飘</button>
			<button type="button" @click="stop()">停</button>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					msg:"晚星就像你的眼睛,杀人又放火·········",
					ind:null,//停止定时器标识
				},
				methods:{
					run(){
						if(this.ind){return};
						this.ind=setInterval(()=>{
							var arr = this.msg.split('');
							//shift 删除并返回数组的个数
							// push 添加最后面
							// 把数组的第一个元素放在后面
							arr.push(arr.shift());
							// arr.join() 把数组连接为字符串复制给msg 
							this.msg=arr.join('');
						},100)
					},
					stop(){
						// 清除定时器
						clearInterval(this.ind);
						//设置ind为null
						this.ind =null;
					}
				}
				
			})
		</script>
	</body>
</html>

写Bug的老王

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
vue跑马灯效果

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"&gt...
复制链接

扫一扫