Vue入门—实现跑马灯效果

实现的业务逻辑

  1. 给[嗨起来]按钮,绑定一个点击事件 v-on(@)。
  2. 在按钮的事件函数处理中,写相关的业务逻辑:拿到msg的字符串,后调用字符串中的substring来进行字符串的截取操作,放到最后一个位置。
  3. 为了实现点击下按钮,自动截取功能,需要将步骤2中代码放到一个定时器中。
    在这里插入图片描述
    在这里插入图片描述
    实现代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="vue.min.js"></script>
</head>
<body>
	<div id="app">
		<input type="button" value="嗨起来" @click="bejin">
		<input type="button" value="停下" @click="stop">
		<h4>{{msg}}</h4>
	</div>
	<script>
		//注意:在vm实例中,想获取data数据或调用methods中的方法,必须通过this.数据属性名或this.方法名来进行访问,该this表示我们new出来的vm实例对象
		var vm=new Vue({
			el:'#app',
			data:{
				msg:'嗨起来,跑马灯~~',
				intervalId:null
			},
			methods:{
				bejin(){
					if(this.intervalId!=null) return
					//箭头解决this指向问题,由内部的指向外部
					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上同步到页面中去
					},50)
				},
				stop(){//停止计时器
					clearInterval(this.intervalId)
					//每当清除了定时器后,需要重新把intervalId置为null
					this.intervalId=null;
				}
			}
		})
	</script>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值