源代碼
點擊運行
<!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>
運行結果