跑马灯效果

最新推荐文章于 2024-11-08 16:09:18 发布

weixin_45122202

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量80

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_45122202/article/details/104107105

版权

本文介绍了一个使用Vue.js实现的简单动画效果，通过两个按钮控制文本的动态变化。利用定时器和字符串操作技巧，实现了“猥琐发育，别浪~~！”这一短语的循环滚动效果，展示了Vue的数据绑定和事件处理机制。

摘要由CSDN通过智能技术生成

html代码

<div id="app">
	<input type="button" value="浪起来" @click="lang"></input>
	<input type="button" value="低调" @click="stop"></input>
	<h4>{{msg}}</h4>
</div>

js代码

<script>
//注意：在Vue实例中，如果想要获取data上的上的数据，或者想要调用methods中的方法，必须通过this.数据属性名或this.方法名来进行访问，这里的this就表示我们new出来的VM实例对象
	var vm=new Vue({
	el："#app",
	data:{
		msg:'猥琐发育，别浪~~！',
		intervalId：null//在data上定义定时器id
	 }，
	 methods:{
	  lang(){
	  	if(this.intervalId!=null)return;
		this.intervalId=setInterval(()=>{//function换成箭头函数，this指向父元素
			//获取到头的第一个字符
			var start=this.msg.substring(0,1)
			//获取后面的所有字符
			var end=this.msg.substring(1)
			//重新拼接得到新的字符串，并赋值给this.msg
			this.msg=end=start
		},400)
		},
	stop(){
		clearInterval(this.intervalId)
		//每当清除定时器之后，需要重新把intervalId设置为null
		this.intervalId=null;
		}
	 }
	})	
</script>