vue.js从入门到深入再到随心而用———利用v-cloak等一系列指令完成跑马灯效果

本文链接：https://blog.csdn.net/qq_42147171/article/details/104909793

利用v-cloak等一系列指令完成跑马灯效果

1.效果
2.代码
3. 要点

1.效果

点击开始后实现文字依次向前移动的效果，前面的文字跑到后买

2.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--导入vue包-->
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>
	<body>
		<!--创造一个要控制的区域-->
		<div id="app">
			<input type="button" value="浪起来" @click="lang"/>
			<input type="button" value="别浪" @click="stop"/>
			<h4>{{msg}}</h4>
		</div>
		<script type="text/javascript">
			
//			在vm实例中如果想要调用data中的数据或者methods方法,必须通过this.数据属性名或者this.方法
//			名进行访问,this表示new出来的vue对象
			var vm=new Vue({
				el:'#app',
				data:{
					msg:'猥琐发育，别浪~~！',
					time:null
				},
				methods:{
					lang:function(){
						if(this.time!=null)return;
						var _this=this;
						this.time=setInterval(function(){
//						获取的第一个字符
						var start=_this.msg.substring(0,1)
//						获取的后面的字符
						var end=_this.msg.substring(1)
//						拼接
						_this.msg=end+start;
					},500)
				},
					stop:function(){
						clearInterval(this.time)
						this.time=null
					}
				}
				})	
		</script>
	</body>
</html>

3. 要点

1.v-on可以缩写为@
2.事件放在methods中注意，号，改打，号的地方要打，号，不然会报错
3.将定时器的名称放在data中定义方便调用，因为在lang和stop两个函数中都会调用，单一的定义在一个函数内使用不方便
4.如果对于this.time的值不加以判断，一直点击浪起来按钮，速度会加快，所以必须每次都判断，如果定时器不为空则直接退出
5.在调用了stop函数后，不要忘了将this.time置空