vuejs标签切换demo

来源：互联网发布：源码怎么使用编辑：程序博客网时间：2024/06/05 08:44
运行后效果如下：
<!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>//扩展组件tab01var 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>
0 0