vue实现公告展示效果

最新推荐文章于 2024-06-04 17:18:28 发布

繁花&遇见

最新推荐文章于 2024-06-04 17:18:28 发布

阅读量6.2k

点赞数 3

文章标签： vue

本文链接：https://blog.csdn.net/weixin_40292154/article/details/106447149

版权

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="../lib/bootstrap/css/bootstrap.css"/>
</head>
<style type="text/css">
	.btn-click{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30px;
		margin-bottom: 20px;
	}
	.msg{
		display: flex;
		flex-direction: row;
		border: 1px solid #D9D9D9;
		border-radius: 5px;
		align-items: center;
		white-space:nowrap;
		overflow: hidden;
	}
</style>
<body>
	<div id="app">
		
		<div class="container">
			<div class="row">
				<div class="btn-click">
					<input type="button" value="开始" class="btn btn-primary" @click="lang" />
					&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="button" value="停止" class="btn btn-danger" @click="stop" />
					
				</div>
				
				<div class="msg">
					<span class="glyphicon glyphicon-volume-up float-left"  aria-hidden="true" style="margin-left: 10px;margin-right: 10px;"></span>
					<h4>{{msg}}</h4>
				</div>
				
			</div>
		</div>
	</div>
	
	<script type="text/javascript">
		// 注意：在 VM实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，必须通过 this.数据属性名  或  this.方法名 来进行访问，这里的this，就表示 我们 new 出来的  VM 实例对象
		var vm = new Vue({
			el:'#app',
			data:{
				msg:'这是公告--世上有味之事，包括诗，酒，哲学，爱情，往往无用。吟无用之诗，醉无用之酒，读无用之书，钟无用之情，终于成一无用之人。',
				intervalId:null //在data上定义 定时器Id
			},
			methods:{
				lang(){
					
					if(this.intervalId !== null){
						return;
					}
					
					var _this = this
					this.intervalId = setInterval(function(){
						// 获取到头的第一个字符
						var start = _this.msg.substring(0,1)
						
						// 获取到后面的所有字符
						var end = _this.msg.substring(1)
						
						// 重新拼接得到的字符串 并赋值给this.msg
						_this.msg = end + start
						
					},400)
					
				},
				stop(){
					
					// 停止定时器
					clearInterval(this.intervalId)
					// 每当清除了定时器重新把intervalId设置为null
					this.intervalId = null
					
				}
			}
		})
		
	</script>
	
</body>
</html>

繁花&遇见

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
vue实现公告展示效果

效果图代码<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></ti
复制链接

扫一扫