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

运行界面

在这里插入图片描述

美少女降临人世间
发布了143 篇原创文章 · 获赞 90 · 访问量 1万+
私信 关注

本文链接http://element-ui.cn/news/show-855.aspx