Vue指令 v-on和跑马灯效果

最新推荐文章于 2023-12-04 17:53:32 发布

junkaigege

最新推荐文章于 2023-12-04 17:53:32 发布

阅读量194

点赞数

分类专栏：前端文章标签： v-on vue 跑马灯效果定时器

本文链接：https://blog.csdn.net/junkaigege/article/details/103223098

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

跑马灯效果

详细的思路就不写了，写个简略的，还有需要注意的几个点罗列出来。
基本上就是，写好区域和内容，然后点击浪起来按钮，执行浪的方法，点击低调，执行停止的方法（清除计时器），浪的方法就是计时器（获取字符串，截取字符串，字符串拼接，200），就可以实现了循环拼接，也就是前一个字符，显示在最后一个位置上的跑马灯效果，停止就是清除计时器。

substring截取字符串

setInterval 定时器 clearInterval 停止定时器

箭头函数 =>

if（this.intervalId != null） return，结尾再给intervalId赋值为null

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="vue.js"></script>
</head>
<body>
	<!-- 创建一个要控制的区域 -->
		<div id="app">
			<input type="button" value="浪起来" v-on:click="lang">
			<input type="button" value="低调" @click="stop">
			<h4>{{ msg }}</h4>
		</div>
		
	<script>
		var vm=new Vue({
			el:'#app',
			data:{
				msg:'猥琐发育，别浪~~！',
				intervalId:null //在data上定义定时器Id
			},
			methods:{
				// lang:function{
				// 	substring(this.msg)
				// }

				
				// lang(){ 
				// 	var _this=this
				// 	//获取到头部的第一个字符
				// 	setInterval(function(){
				// 		var start=_this.msg.substring(0,1)
				// 		//获取到后面的所有字符
				// 		var end=_this.msg.substring(1)
				// 		//重新拼接字符串并赋值给this.msg
				// 		_this.msg=end+start
				// 		//vm实例，会自动监听自身data中所有数据的改变，只要数据变化，就会自动把数据从data中同步到和页面中，所以就不需要考虑重新渲染到页面

				// 	},400)
					
			//es6写法	
			  lang(){ 
					if (this.intervalId != null) return;
					//获取到头部的第一个字符
					this.intervalId=setInterval(()=>{
						var start=this.msg.substring(0,1)
						//获取到后面的所有字符
						var end=this.msg.substring(1)
						//重新拼接字符串并赋值给this.msg
						this.msg=end+start
						//vm实例，会自动监听自身data中所有数据的改变，只要数据变化，就会自动把数据从data中同步到和页面中，所以就不需要考虑重新渲染到页面

					},200)
					


				},
				stop(){
					//  停止定时器
					clearInterval(this.intervalId)
					this.intervalId=null;
				}
			}

		})

	</script>
</body>
</html>

junkaigege

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue指令 v-on和跑马灯效果

跑马灯效果详细的思路就不写了，写个简略的，还有需要注意的几个点罗列出来。基本上就是，写好区域和内容，然后点击浪起来按钮，执行浪的方法，点击低调，执行停止的方法（清除计时器），浪的方法就是计时器（获取字符串，截取字符串，字符串拼接，200），就可以实现了循环拼接，也就是前一个字符，显示在最后一个位置上的跑马灯效果，停止就是清除计时器。substring截取字符串setInterval 定时...
复制链接

扫一扫