跑马灯案例vue

最新推荐文章于 2022-09-27 11:11:52 发布

cheer_98

最新推荐文章于 2022-09-27 11:11:52 发布

阅读量118

点赞数

分类专栏：学习日常文章标签： vue

本文链接：https://blog.csdn.net/cheer_98_/article/details/103084887

版权

学习日常专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="vue-2.4.0.js"></script>
</head>
<body>
	<div id="app">
		<input type="button" value="开始" @click="start">
		<input type="button" value="结束" @click="stop">
		<h4>{{msg}}</h4>
	</div>
	<script>
		var vm = new Vue({
			el:"#app",
			data:{
				msg:"热爱可抵岁月漫长，我们来日方长"
			},
			methods:{
				start() {
					if (this.intervalID) return;
					this.intervalID = setInterval(() => {
						// console.log(this.msg);
						var start = this.msg.substring(0,1);
						var end = this.msg.substring(1);
						this.msg = end + start;
						// console.log(this.msg);	
					},400)
					
				},
				stop() {
					clearInterval(this.intervalID);
					this.intervalID = null;
				}
			}

		})
	</script>
</body>
</html>

cheer_98

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跑马灯案例vue

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="vue-2.4.0.js"></script></head><body&gt...
复制链接

扫一扫