<div id="app">
<div class="title">
<a href="#" :class="{'active': currentTab == v}" v-for="v in tab" @click="currentTab = v">{{v.title}}</a>
</div>
<component v-bind:is="currentComponent" :tab="currentTab"></component>
</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">
<ul>
<li v-for="v in tab.content">{{v}}</li>
</ul>
</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"],
template: "#tab-content-array"
});
var app = new Vue({
el: "#app",
data: {
tab: [
{
title: "Tab1",
content: "abcabc"
},
{
title: "Tab2",
content: ["abc", "def", "ghi"]
}
],
currentTab: ''
},
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.