使用Vue.js写一个简单的导航菜单_综合

使用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.org/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><!-- 当菜单上的链接被点击时，我们调用了 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: 'home'},// 点击菜单使用的函数methods: {makeActive: function(item){// 模型改变，视图会自动更新this.active = item;}}}); </script>
</body>
</html>
运行界面

使用Vue.js写一个简单的导航菜单