Vue基础--跑马灯效果

最新推荐文章于 2024-04-29 14:01:59 发布

AsaZyf

最新推荐文章于 2024-04-29 14:01:59 发布

阅读量268

点赞数

分类专栏： Vue 文章标签： Vue Vue基础跑马灯 vue跑马灯

本文链接：https://blog.csdn.net/AsaZyf/article/details/86557371

版权

Vue 同时被 2 个专栏收录

50 篇文章 1 订阅

订阅专栏

Vue基础

3 篇文章 0 订阅

订阅专栏

code：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<!--创建一个控制区-->
		<div id="app">
			<input type="button" value="荡起来" @click="lang"/>
			<input type="button" value="别荡" @click="stop"/>
			<h4>{{msg}}</h4>
		</div>
		
		<script>
			//实力例化对象
			var vm=new Vue({
				el:'#app',
				data:{
					msg:"123，荡起来~~!",
					interval:null
				},
				methods:{
					lang(){
						if (this.interval!=null)return;
						
						 this.interval=setInterval(()=>{
							//获取第一个字符
							var start=this.msg.substring(0,1)
							//获取除第一个外，剩下的字符
							var end=this.msg.substring(1)
							//重新拼接得到新的字符串，并赋值给this.msg
							this.msg=end+start
						},500)
					},
					stop(){
						clearInterval(this.interval)
						//清除定时器后，重新将interval重置为null
						this.interval=null
					}
				}
			})
		</script>
	</body>
</html>

effect：

AsaZyf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础--跑马灯效果

code：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/vue.js" &amp
复制链接

扫一扫

专栏目录