vue 简单导航菜单

首先写一个div: 并使用makeActive(）方法传递事件：

<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>

 

 

结果：

 

源码和参考资料：

https://github.com/xiamaocheng/vuedemo/tree/master/demo

https://www.runoob.com/vue2/vue-examples.html