Vue跑马灯字符串

最新推荐文章于 2020-08-17 11:39:43 发布

广东话的蛇皇

最新推荐文章于 2020-08-17 11:39:43 发布

阅读量93

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43618136/article/details/104861364

版权

前端专栏收录该内容

352 篇文章 1 订阅

订阅专栏

Vue跑马灯字符串

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, inital-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>跑马灯</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="button" value="动起来" @click="lang">
		<input type="button" value="停下来" @click="stop">
		<h4>{{ msg }}</h4>
	</div>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				msg: 'π3.1415926 CSDN',
				intervalId: null
			},
			methods: {
				lang() {
					if(this.intervalId != null)
						return;
					this.intervalId = setInterval( () => {
						var start = this.msg.substring(0, 1)
						var end = this.msg.substring(1)
						this.msg = end + start
					}, 400)
				},
				stop() {
					clearInterval(this.intervalId)
					this.intervalId = null
				}
			}
		})
	</script>
</body>
</html>

广东话的蛇皇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue跑马灯字符串

Vue跑马灯字符串<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, inital-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫

专栏目录