1. 首页
  2. 新闻资讯
  3. 正文

Vue-跑马灯效果

<!DOCTYPE html> <html>  	<head> 		<meta charset="UTF-8"> 		<title></title> 		<!--1.导入Vue包--> 		<script src="js/Vue-2.6.14.js"></script> 	</head>  	<body> 		<!--2.创建一个要控制的区域--> 		<div id="app"> 			<input type="button" value="浪起来" @click="lang" /> 			<input type="button" value="停止" @click="stop" />  			<h4>{{msg}}</h4> 		</div> 	</body> 	<script> 		//注意：在vw实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须通过 this.数据属性名或this.方法名来进行访问，这里的this,就表示我们new出来的 M实例对像  		var vm = new Vue({ 			el: "#app", 			data: { 				msg: "猥琐发育，别浪~~！", 				intervalId: null, // 在data上定义 定时器Id 			}, 			methods: { 				lang() { 					// console.log(this.msg)  					if(this.intervalId != null) return;  					this.intervalId = setInterval(() => { 						//获取到头的第一个字符  						var start = this.msg.substring(0, 1)  						//获取到后面的所有字符  						var end = this.msg.substring(1)  						//重新拼接得到新的字符串，并赋值给 						this.msg = end + start 					}, 400)  					//注意：实例，会监听自己身上ata中所有数据的改变，只要数据一发生变化，就会自动把最 新的数据，从data上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DoM 页面】 				},  				stop() { // 停止定时器 					clearInterval(this.intervalId) 					//每当清除了定时器之后，需要重新把 interva1Id 置为 nul1  					this.intervalId = null; 				} 			}  		})  		// 分析：  		//1.给【浪起来】按钮，绑定一个点击事件 v-on @ 		//2.在按钮的事件处理函数中，写相关的业务逻辑代码：拿到msg字符串，然后调用字符串的 substring来进行字符串的截取操作，把第一个字符截取出来，放到最后一个位置即可  		//3.为了实现点击下按钮，自动截取的功能，需要把2步骤中的代码，放到个定时器中去 	</script>  </html>

上一个：mysql数据库锁MDL锁的解释_在线工具

下一个：react事件类型

热门文章

归纳