Vue.js实现简单的跑马灯效果

最新推荐文章于 2022-11-12 19:07:44 发布

哒哒键盘小哥

最新推荐文章于 2022-11-12 19:07:44 发布

阅读量331

点赞数

分类专栏：前端框架vue.js

本文链接：https://blog.csdn.net/qq_41304579/article/details/103444959

版权

前端框架vue.js 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>跑马灯的实现</title>
	<script src="vue.js"></script>
</head>
<body>
	<!-- 
	分析：
		1.给按钮绑定点击事件， v-on
		2.在按钮的处理处理函数中，写相关的业务逻辑代码：拿到msg字符串，然后调用字符串的subString进行字符串的截取操作
		3.为了实现点击按钮，自动截取的功能，需要把步骤2的代码放到一个定时器中
	 -->
	<div id="app">
		<input type="button" value="跑起来" @click="start">
		<input type="button" value="停止" @click="end">
		<h4>{{msg}}</h4>
	</div>

	<script>
		var em=new Vue({
			el:'#app',
			data:{
				msg:'前端框架------Vue.js',
				intervalId:null //在data上定义 定时器Id
			},
			//注意在vm实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须通过this
			methods:{
				start(){
					/*
					var _this=this
					setInterval(function(){

						//获取到第一个字符
						var startStr=_this.msg.substring(0,1)

						//获取到后面的所有字符
						var endStr=_this.msg.substring(1)

						//重新赋值给msg
						_this.msg=endStr+startStr
					},400)
					*/
					if(this.intervalId !=null) return; 
					this.intervalId=setInterval(() =>{

						//获取到第一个字符
						var startStr=this.msg.substring(0,1)

						//获取到后面的所有字符
						var endStr=this.msg.substring(1)

						//重新赋值给msg
						this.msg=endStr+startStr
					},100)


					//注意:vm实例会监听自己身上data中多有数据的改变，只要数据发生变化，会自动把最新的数据从data上同步到页面中
					//好处：我们只需要关心数据，不需要考虑如何重新渲染DOM页面
				},
				end(){
					clearInterval(this.intervalId)
					this.intervalId=null;
				}
			}
		})


	</script>
</body>
</html>

哒哒键盘小哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js实现简单的跑马灯效果

实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>跑马灯的实现</title> <script src="vue.js"></script></head><body> ...
复制链接

扫一扫