mint-ui —— navbar和tab-container的区别

 1 <template>  
 2   <div class="page-navbar">  
 3     <div class="page-title">Navbar</div>  
 4     <!-- navbar -->  
 5     <mt-navbar class="page-part" v-model="selected">  
 6       <mt-tab-item id="1">选项一</mt-tab-item>  
 7       <mt-tab-item id="2">选项二</mt-tab-item>  
 8       <mt-tab-item id="3">选项三</mt-tab-item>  
 9     </mt-navbar>  
10   
11     <div>  
12       <mt-cell class="page-part" title="当前选中">{{ selected }}</mt-cell>  
13     </div>  
14   
15     <!-- tabcontainer -->  
16     <mt-tab-container v-model="selected">  
17       <mt-tab-container-item id="1">  
18         <mt-cell v-for="n in 10" :title="'内容 ' + n" />  
19       </mt-tab-container-item>  
20       <mt-tab-container-item id="2">  
21         <mt-cell v-for="n in 4" :title="'测试 ' + n" />  
22       </mt-tab-container-item>  
23       <mt-tab-container-item id="3">  
24         <mt-cell v-for="n in 6" :title="'选项 ' + n" />  
25       </mt-tab-container-item>  
26     </mt-tab-container>  
27   </div>  
28 </template>  
29   
30 <script>  
31 export default {  
32   name: 'page-navbar',  
33   
34   data() {  
35     return {  
36       selected: '1'  
37     };  
38   }  
39 };  
40 </script>  

navbar.vue