vue.js标签页切换

运行后效果如下：
[html]view plain copy
<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>Vue.js小demo</title>  
  <style>  
  h3{  
    margin-top: 10px;  
  }  
  #content{  
    width: 400px;  
    margin: 30px auto;  
    background: #eee;  
    padding:10px;  
    overflow: hidden;  
  }  
  .nav{  
    width: 100%;  
    height: 24px;  
    list-style: none;  
  }  
  .nav li a{  
    width: 30%;  
    float: left;  
  }  
  .tab-con{  
    min-height: 200px;  
    margin-top: 10px;  
    width: 90%;  
    border-radius: 4px;  
    background: #cfcfcf;  
    margin:0 auto;  
    padding:10px;  
  }  
  </style>  
</head>  
<body>   
<template id="temp-tab01">  
    <div>this is tab01</div>  
</template>  
<template id="temp-tab02">  
    <div>this is tab02</div>  
</template>  
<template id="temp-tab03">  
    <div>this is tab03</div>  
</template>  
<div id="content">  
    <h3>动态组件</h3>  
    <!-- 导航栏 -->  
    <ul class="nav">  
        <li><a href="javascript:void(0);" @click="toggleTabs(tab01Text)">{{tab01Text}}</a></li>  
        <li><a href="javascript:void(0);" @click="toggleTabs(tab02Text)">{{tab02Text}}</a></li>  
        <li><a href="javascript:void(0);" @click="toggleTabs(tab03Text)">{{tab03Text}}</a></li>  
    </ul>  
     <!-- 点击导航后要切换的内容 -->  
     <div class="tab-con">  
         <component :is="currentView" keep-alive></component>  
     </div>  
</div>  
</body>  
<script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script>  
<script>  
//扩展组件tab01  
var tab01=Vue.extend({  
    template:"#temp-tab01"  
});  
var tab02=Vue.extend({  
    template:"#temp-tab02"  
});  
var tab03=Vue.extend({  
    template:"#temp-tab03"  
});  
  
var dr01=new Vue({  
    el:"#content",  
    data:{  
        tab01Text:"tab01",  
        tab02Text:"tab02",  
        tab03Text:"tab03",  
        currentView:'tab01'//默认选中的导航栏  
    },  
    //局部注册组件  
    components:{  
        tab01:tab01,  
        tab02:tab02,  
        tab03:tab03  
    },  
    methods:{  
        //绑定tab的切换事件  
        toggleTabs:function(tabText){  
            this.currentView=tabText;  
        }  
    }  
});  
</script>  
</html>  
猜你喜欢
