Vue.js 实现 Tab 选项卡：避开 DOM 操作与路由方案

无路由方案的组件化实现

<div id="app">
 <ul>  
  <li @click="toggle($index ,tab.view)" v-for="tab in tabs" :class="{active:active==$index}">
    {{tab.type}}  
   </li> 
 </ul> 
 <component :is="currentView"></component>
</div>

Vue.component('child1', { 
 template: "<p>this is child1</p>"
})
Vue.component('child2', { 
 template: "<p>this is child2</p>"
})
new Vue({ 
 el: "#app", 
 data: { 
 active: 0, 
 currentView: 'child1', 
 tabs: [ 
 {  
  type: 'tab1', 
  view: 'child1' 
 },  
 {  
  type: 'tab2', 
  view: 'child2' 
 } 
 ] 
}, 
 methods: { 
 toggle(i, v){ 
 this.active = i 
 this.currentView = v 
 } 
 }
})

.active{
 color:red
}