<div id="app">
<div class="title">
<a href="#" :class="{'active': currentTab == v}" v-for="v in tab" @click="currentTab = v">{{v.title}}</a>
</div>
<keep-alive>
<component v-bind:is="currentComponent" :tab="currentTab"></component>
</keep-alive>
</div>
<script type="text/x-template" id="tab-content-string">
<div class="content">
{{tab.content}}
</div>
</script>
<script type="text/x-template" id="tab-content-array">
<div class="content">
<div class="title">
<a href="#" :class="{'active': child == v}" v-for="v in tab.content" @click="child = v">{{v.title}}</a>
</div>
<div class="content" v-if="child">{{child.content}}</div>
</div>
</script>#app{
.title{
a{
display: inline-block;
padding: 10px 20px;
background-color: #e3e3e3;
text-decoration: none;
color: #666;
&.active{
background-color: #c3c3c3;
color: #000;
}
}
}
.content{
border: 1px solid #c3c3c3;
padding: 20px;
}
}Vue.component('tab-content-string', {
props: ['tab'],
template: '#tab-content-string'
});
Vue.component('tab-content-array', {
props: ['tab'],
data: function(){
return {
child: this.tab.content[0]
}
},
template: '#tab-content-array'
});
var app = new Vue({
el: '#app',
data: {
tab: [
{
title: 'Tab1',
content: 'abcabc'
},
{
title: 'Tab2',
content: [
{
title: 'Tab2-1',
content: '1111111111111111'
},
{
title: 'Tab2-2',
content: '22222222222222'
},
{
title: 'Tab2-3',
content: '3333333333333333'
}
]
}
],
currentTab: null
},
computed: {
currentComponent: function(){
return 'tab-content-' + (typeof this.currentTab.content == 'string' ? 'string' : 'array');
}
},
created: function(){
this.currentTab = this.tab[0];
}
});
External CSS
This Pen doesn't use any external CSS resources.