基于Vue.js实现跑马灯效果

最新推荐文章于 2024-01-06 11:11:58 发布

年年有很多余

最新推荐文章于 2024-01-06 11:11:58 发布

阅读量1.6k

点赞数 1

分类专栏： js 文章标签： Vue.js

本文链接：https://blog.csdn.net/qq_37543808/article/details/85469576

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
   	<script type="text/javascript" src="js/vue.js"></script>
   	<script type="text/javascript" src="js/jquery-1.12.4.js"></script> 
</head>
<body>
	<div id="app">
		<div>
			<button type="button" @click="start()">跑起来</button>
			<button type="button" @click="end()">低调</button>
		</div>
		<div>{{msg}}</div>
	</div>
	 <script type="text/javascript">
	 		
	 		var vue=new Vue({
	 			el:"#app",
	 			data:{
	 				msg:"发育,猥琐发育，别浪！！！",
	 				time:"22"
	 			},
	 			methods:{
	 				start:function(){
	 					this.time=setInterval(()=>{
	 						var head=this.msg.substring(0,1);
	 						var tail=this.msg.substring(1);
	 						this.msg=tail+head;
	 					},400);

	 				},
	 				end:function(){
	 					clearInterval(this.time)

	 				}
	 			}
	 		})
	 
	 </script>
</body>
</html>

年年有很多余

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于Vue.js实现跑马灯效果

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;script type="text/javascript" src="
复制链接

扫一扫