使用Vue.js写一个简单的导航菜单

使用Vue.js写一个简单的导航菜单

  • 代码
  • 运行界面

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">script>
head>
<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.best .best,
    nav.animal .animal,
    nav.hello .hello{
        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>
<body>
<div id="main">
    
    <nav v-bind:class="active" v-on:click.prevent>
        
        <a href="#" class="home" v-on:click="makeActive('home')">homea>
        <a href="#" class="best" v-on:click="makeActive('best')">besta>
        <a href="#" class="animal" v-on:click="makeActive('animal')">animala>
        <a href="#" class="hello" v-on:click="makeActive('hello')">helloa>
    nav>
    <p>选择了<b>{{active}}b>菜单p>
div>
<script>
    //创建新的Vue实例
    var vm = new Vue({
        //DOM元素,挂载视图模式
        el:'#main',
        //定义属性,设置初始值
        data:{
          active:'home'
        },
        //点击菜单使用的函数
        methods:{
            makeActive:function(item){
                //模式改变,视图会自动更新
                this.active=item;
            }
        }
    })
script>
body>
html>

运行界面

使用Vue.js写一个简单的导航菜单_第1张图片

你可能感兴趣的:(Vue学习)