实现效果：
实现代码以及注释：
<!DOCTYPE html><html><head> <title>按钮绑定</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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: #3b9dc1; } 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; z-index: 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的变量的值作为一个class --> <!-- 为了防止当我们点击链接时页面发生跳转，我们使用prevent优化 --> <nav v-bind:class="active" v-on:click.prevent> <!-- 当一个菜单中的链接被点击，我们调用定义在javaScript vue中的makeActive方法 --> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="home" v-on:click="makeActive('home')">Home</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="projects" v-on:click="makeActive('projects')">Projects</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="services" v-on:click="makeActive('services')">Services</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="contact" v-on:click="makeActive('contact')">Contact</a> </nav> <!-- mustache表达式将被active的值替换，它将发生任何变化它都将会自动更新--> <p>YOU SELECTED <b>{{active}}</b></p></div><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script><script type="text/javascript"> // 创建一个Vue示例，并且传递一个可选对象 var demo = new Vue({ // 一个DOM元素表示我们的view模型 el: '#main', // 定义属性值，给定初始化值 data: { active: 'home' }, // 我们需要使用到的函数 methods: { makeActive: function(item){ // 当一个model发生变化，view会自动更新 this.active = item; } } });</script></body></html>新闻热点
疑难解答
