Vue.js_实例_菜单导航栏

最新推荐文章于 2024-07-19 20:58:37 发布

徐小硕

最新推荐文章于 2024-07-19 20:58:37 发布

阅读量1.4k

点赞数 3

分类专栏： Vue_实例案例文章标签： vue html 前端

本文链接：https://blog.csdn.net/qq_40601005/article/details/105974248

版权

Vue_实例案例专栏收录该内容

4 篇文章 1 订阅

订阅专栏

经过几个月的学习。慢慢熟悉了vue框架的使用，接下来我用vue编写一个菜单导航栏的实例，作为短暂性的小结。

运行视图如下

下面是代码部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue_实例</title>
		<script src="../vue/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			body {
				font: 15px/1.3 'Open Sans', sans-serif;
				color: #5e5b64;
				text-align: center;
			}

			a,a:visited {
				outline: none;
				color: #389dc1;
			}

			a:hover {
				/* 去除下划线 */
				text-decoration: none;
			}

			section,
			footer,
			header,
			aside,
			nav {
				display: block;
			}

			nav {
				display: inline-block;
				margin: 60px auto 45px;
				background-color: #5597b4;
				box-shadow: 0 1px 1px #CCCCCC;
				border-radius: 2px;
			}

			nav a {
				display: inline-block;
				padding: 18px 30px;
				color: #FFFFFF !important;
				font-weight: bold;
				font-size: 16px;
				text-decoration: none !important;
				line-height: 1;
				text-transform: uppercase;
				background-color: transparent;

				-webkit-transition: background-color 0.25s;
				-moz-transition: background-color 0.25s;
				transition: background-color 0.25s;
			}

			nav a:first-child {
				border-radius: 2px 0 0 2px;
			}

			nav a:last-child {
				border-radius: 0 2px 2px 0;
			}

			nav.首页 .home,
			nav.项目 .projects,
			nav.业务 .services,
			nav.联系 .contact {
				background-color: #e35885;
			}
			p{
					font-size:22px;
					font-weight:bold;
					color:#7d9098;
				}
			
				p b{
					color:#ffffff;
					display:inline-block;
					padding:5px 10px;
					background-color:#e35885;
					border-radius:2px;
					text-transform:uppercase;
					font-size:18px;
				}

		</style>
	</head>
	<body>
		<div id="main">
			<!-- 激活的菜单样式为active类-->
			<!-- 为了阻止链接在点击时跳转，我们使用了"prevent"修饰（preventDefaunlt） -->
			<nav v-bind:class="active" v-on:click.prevent>
				<!-- 当菜单上的链接被点击时，我们调用了makeActive方法 该方法在vue实例中创建-->
				<a href="#" class="home" v-on:click="makeActive('首页')">首页</a>
				<a href="#" class="projects" v-on:click="makeActive('项目')">项目</a>
				<a href="#" class="services" v-on:click="makeActive('业务')">业务</a>
				<a href="#" class="contact" v-on:click="makeActive('联系')">联系</a>
			</nav>
			<!-- 一下"active"变量会根据当前选中的值来自动变换 -->
			<p>您选择了<b>{{active}}</b>菜单栏</p>
		</div>

		<!-- script -->
		<script type="text/javascript">
			//创建一个新的Vue实例
			var demo = new Vue({
				//DOM元素，挂载视图模型
				el: '#main',
				//定义属性，并设置初始值
				data: {
					active: '首页'
				},
				//点击菜单使用的函数
				methods: {
					makeActive: function(item) {
						//模型改变，视图会自动更新
						this.active = item;
					}
				}
			})
		</script>
	</body>
</html>