基于Vue实现标签的字体滚动

最新推荐文章于 2025-05-14 17:09:11 发布

念你那丝微笑

最新推荐文章于 2025-05-14 17:09:11 发布

阅读量941

点赞数

分类专栏： Vue.js学习文章标签：指针 vue javascript html

本文链接：https://blog.csdn.net/pig_pig32/article/details/108471113

版权

Vue.js学习专栏收录该内容

12 篇文章

订阅专栏

实现思路：

通过截取数据第一个字符，把它拼接到最后，通过定时器实现滚动效果，在vue中，当你更新data数据时，网页会自己帮你更新网页中的数据。

实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基于Vue实现标签的字体滚动</title>
		<!--导入vue包-->
		<script src="lib/vue-2.4.0.js"></script>
	</head>
	<body>
		<div id="app">
		<!--通过v-on（缩写@）绑定点击事件-->
			<input type="button" name="" id="" value="跑起来" @click="running" />
			<input type="button" name="" id="" value="停一下" @click="stop" />
			<!--通过v-text获取数据-->
			<h1 v-text="msg"></h1>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					msg:'我要飞起来啦！奥利给，兄弟们',
					Intervalid:null,//用于后面清除定时器
				},
				methods:{
					// running(){
					// 	if(this.Intervalid!=null) return;
					//因为这里的this是指vue实例对象，而Interval里的this是指window，所以var _this=this;这样在Interval使用vue对象	
					// 	var _this=this;	
					// 	_this.Intervalid=setInterval(function(){
					//截取第一个字符
					// 		var start=_this.msg.substring(0,1);
					//截取不是第一个字符
					// 		var stop=_this.msg.substring(1);
					//重新赋值拼接
					// 		_this.msg=stop+start;
					// 	},500)
					// }
					
					running(){
					//防止开启多个定时器
						if(this.Intervalid!=null) return;
						//通过使用ES6的()=>来实现Interval定时器的this指向外部的this指针
						this.Intervalid=setInterval(()=>{
							var start=this.msg.substring(0,1);
							var stop=this.msg.substring(1);
							this.msg=stop+start;
						},500)
					},
					stop(){
					//清除定时器
						clearInterval(this.Intervalid);
						this.Intervalid=null;
					}
				}
				
			});
			
		</script>
	</body>
</html>