vue入门——制作跑马灯效果

最新推荐文章于 2024-09-11 09:50:46 发布

哈哈hyc

最新推荐文章于 2024-09-11 09:50:46 发布

阅读量2.7k

点赞数

分类专栏：前端前端——vue 文章标签： vue 前端跑马灯

本文链接：https://blog.csdn.net/erdfty/article/details/88403246

版权

前端同时被 2 个专栏收录

64 篇文章 4 订阅

订阅专栏

前端——vue

22 篇文章 0 订阅

订阅专栏

初学者vue可以制作一个简单的跑马灯效果的项目，效果如上图，代码如下图，大家可以自己尝试：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://unpkg.com/vue/dist/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: '猥琐发育，别浪~~！',
				intervalId: null //在data上定义 定时器Id
			},
			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>

展示效果链接：http://hyc5.cn/paomadeng.html