菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码:
点击运行
保存
<!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{color:#5e5b64;text-align:center;} a, a:visited {outline:none;color:#389dc1;text-decoration:none;} section, footer, header, aside, nav{display:block;} nav{width:99%;height:33px;display:inline-block;margin:6% auto 45px;background-color:#5597b4;box-shadow:0 1px 1px #ccc;border-radius:2px;} nav a{display:inline-block;padding:1% 2% 0% 2% ;color:#fff !important; 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>{{active}}</p> </div> <script>// 创建一个新的 Vue 实例 var demo = new Vue({// DOM 元素,挂载视图模型 el:'#main',// 定义属性,并设置初始值 data:{active:'home'},// 点击菜单使用的函数 methods:{makeActive:function(item){// 模型改变,视图会自动更新 this.active = item; } } }); </script> </body> </html>
运行结果