Vue学习笔记02（走马灯小案例）

最新推荐文章于 2022-12-07 15:04:45 发布

snacy

最新推荐文章于 2022-12-07 15:04:45 发布

阅读量247

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/snacy/article/details/109152662

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、this

一个vue实例中，如果要调用当前实例中的data里面的数据或者变量，要用this进行指向，this即代表当前实例

2、走马灯小案例

2.1 定义两个按钮以及一个p标签显示文字

<div id="app">
			<input type="button" value="浪起来" @click="lang" />
			<input type="button" value="低调" @click="stop" />
			<p style="border: 1px solid blue; width: 150px;">{{msg}}</p>  <!-- 这是走马灯显示的信息 -->
		</div>

2.2 data里定义显示的文字

msg:'猥 琐 发 育，别 浪 !',

2.3 lang方法里定义一个计时器

2.3.1 首先，先在data里设置定时器一开始为空

xunhuan:null

2.3.2然后lang方法每次执行前先清除排在前面的定时器

clearInterval(this.xunhuan)

2.3.3然后定义一个计时器注意要用`this`把定时器赋给`xunhuan`这个变量

this.xunhuan = setInterval(()=>{
						//定义一个变量存放字符串第一个字符
						var start = this.msg.substring(0,1); //第0个开始，截取一位
						//定义一个变量存放字符串第二个字符串及后面的字符
						var end = this.msg.substring(1);  //第一位开始，截取后面所有字符
						//重新赋给msg
						this.msg=end+start;
						console.log(this.msg);
					},160)

2.3.4最后定义stop方法停止计时器

//停止定时器
				stop(){
					clearInterval(this.xunhuan)  //里面不用带引号
				}

3、完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>走马灯</title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 原理：利用substring()方法把字符串第一个字符移到最后一位 -->
		<div id="app">
			<input type="button" value="浪起来" @click="lang" />
			<input type="button" value="低调" @click="stop" />
			<p style="border: 1px solid blue; width: 150px;">{{msg}}</p>  <!-- 这是走马灯显示的信息 -->
		</div>
	</body>
	
	<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				msg:'猥 琐 发 育，别 浪 !',
				// 因为在方法里定义的定时器在方法外不能调用,所以把定时器的名称放在data里方便调用
				xunhuan:null
			},
			methods:{
				//开始走马灯效果
				lang(){
					//每次开始前先清除上一次的定时器效果
					clearInterval(this.xunhuan)
					//第二种解决this指向问题  ，就是用箭头函数
					this.xunhuan = setInterval(()=>{
						//定义一个变量存放字符串第一个字符
						var start = this.msg.substring(0,1); //第0个开始，截取一位
						//定义一个变量存放字符串第二个字符串及后面的字符
						var end = this.msg.substring(1);  //第一位开始，截取后面所有字符
						//重新赋给msg
						this.msg=end+start;
						console.log(this.msg);
					},160)
					
				},
				//停止定时器
				stop(){
					clearInterval(this.xunhuan)  //里面不用带引号
				}
			}
		})
	</script>
</html>

4、页面效果

在这里插入图片描述

snacy

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记02（走马灯小案例）

1、this一个vue实例中，如果要调用当前实例中的data里面的数据或者变量，要用this进行指向，this即代表当前实例2、走马灯小案例2.1 定义两个按钮以及一个p标签显示文字<div id="app"> <input type="button" value="浪起来" @click="lang" /> <input type="button" value="低调" @click="stop" /> <p style="border:
复制链接

扫一扫