Vue导航自动绑定对应页面

刚接触Vue，挺好用的，之前做一个网页的时候是使用的是SAP，JS动态加载页面内容，不涉及绑定问题。现在另外做一个导航，点击导航显示不同的页面，正好使用Vue的数据绑定。

<-5个导航栏对应5个div，点击一个时显示其中对应的一个->
<div class="nav nav-tabs nav-tabs-justified" id="backstage-nav">
    <li class="active"><a >0</a></li>
    <li><a >1</a></li>
    <li><a>2</a></li>
    <li><a >3</a></li>
    <li><a >4</a></li>
</div>
<hr>
<div id="bs-mainBox">
    <div id="nav-site-operation" v-if="navSeen1">···</div>
    <div id="nav-type-operation" v-if="navSeen2">···</div>
    <div id="nav-suggestion" v-if="navSeen3">···</div>
    <div id="nav-file" v-if="navSeen4">···</div>
    <div id="nav-contributor" v-if="navSeen5">···</div>
</div>

使用Vue对其导航和对应div进行绑定，每个div中使用v-if来控制显示，值navSeen_为true时显示，false隐藏。这里使用nav的li的active存在与否来绑定navSeen_

 

var mv = new Vue({
        el:'#bs-mainBox',
        data:{
            navSeen1:true,
            navSeen2:false,
            navSeen3:false,
            navSeen4:false,
            navSeen5:false
        }
    });

    $("#backstage-nav li").click(function(){
        $(this).addClass("active");
        $(this).siblings().removeClass('active');
        updateNavSeen();
        //使用active来决定导航是否显示，每次都更新一下导航的active状态
    });
    function updateNavSeen(){
　　　　 let lis = $("#backstage-nav>li");

　　　　 mv.$data.navSeen1=lis.eq(0).hasClass("active") ;
       mv.$data.navSeen2= lis.eq(1).hasClass("active"); 
       mv.$data.navSeen3= lis.eq(2).hasClass("active"); 
       mv.$data.navSeen4= lis.eq(3).hasClass("active"); 
       mv.$data.navSeen5= lis.eq(4).hasClass("active"); 
}

这样就实现了导航栏和对应内容的绑定