Vue.js导航菜单–菜鸟教程实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue.js 导航菜单</title>
    <script src="https://cdn.staticfile/vue/2.4.2/vue.min.js"></script>
    <style>

	*{
		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 #ccc;
		border-radius:2px;
	}

	nav a{
		display:inline-block;
		padding: 18px 30px;
		color:#fff !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 .home,
	nav.projects .projects,
	nav.services .services,
	nav.contact .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:#c4d7e0;
		border-radius:2px;
		text-transform:uppercase;
		font-size:18px;
	}

    </style>

</head>
<body>

<div id="main">

	<!-- 激活的菜单样式为  active 类 -->
	<!-- 为了阻止链接在点击时跳转，我们使用了 "prevent" 修饰符 (preventDefault 的简称)。 -->

	<nav v-bind:class="active" v-on:click.prevent> <!-- v-bind绑定active判断true/false，v-on执行什么动作 -->

		<!-- 当菜单上的链接被点击时，我们调用了 makeActive 方法, 该方法在 Vue 实例中创建。 -->

		<a href="#" class="home" v-on:click="makeActive('home')">Home</a>  
		<a href="#" class="projects" v-on:click="makeActive('projects')">Projects</a>
		<a href="#" class="services" v-on:click="makeActive('services')">Services</a>
		<a href="#" class="contact" v-on:click="makeActive('contact')">Contact</a>
	</nav>

 	<!-- 以下 "active" 变量会根据当前选中的值来自动变换 -->

	<p>您选择了 <b>{{active}} 菜单</b></p>
</div>

<script>
// 创建一个新的 Vue 实例
var demo = new Vue({
	// DOM 元素，挂载视图模型
	el: '#main',

	// 定义属性，并设置初始值
	data: {  //active的值是哪个，就是切换到哪个页面了
		active: 'home'
	},

	// 点击菜单使用的函数
	methods: {
		makeActive: function(item){
			// 模型改变，视图会自动更新
			this.active = item;  //点击后，使用这个方法让active的值更新
		}
	}
});
</script>
</body>
</html>

更多推荐

Vue.js导航菜单--菜鸟教程实例