欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue实现跑马灯效果

程序员文章站 2022-05-15 22:52:57
...

分析:
1、给【浪起来】按钮;绑定一个点击事件 v-on @
2、在按钮的时间处理函数中,写相关的业务逻辑代码:拿到msg字符串,然后 调用字符串 substring 来进行字符串的截取操作,把第一个字符截取出来,放到最后一个位置即可;
3、为了实现点击一下按钮,自动截取的功能,需要把步骤2的代码,放到一个定时器中去;

创建一个控制区域
<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出来的 VM 实例对象
	var vm = new Vue({
		el: '#app',
		data: {
			msg: '跑马灯效果,别浪~~~!',
			intervalId: null  //在data上定义 定时器ID
		},
		methods: {
			lang(){
				// 获取到头的第一个字符
				// this
				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
 				} ,400)
 				// 注意:VM实例,会监听自己身上 data 中所有数据的改变,只要数据一发生变化,就会自动把 最新的数据,从 data 上同步到页面中去;【好处:程序员指需要关心数据,不需要考虑如何重新渲染DOM页面】
			}stop(){	//停止定时器
				clearInterval(this.intervalId)
				// 每当清除了定时器之后,需要重新把 intervalId 置为 null
				this.intervalId = null;
			}
		}
	})
</script>