JSFiddle - React, Tailwind, and code Playground

by yudiandemingzi

HTML

<script src="https://unpkg.com/vue"></script>

<div id="dynamic-component-demo" class="demo">
    <button v-for="tab in tabs" v-bind:key="tab" v-bind:class="['tab-button', { active: currentTab === tab }]" v-on:click="currentTab = tab">{{ tab }}</button>

    <component v-bind:is="currentTabComponent" class="tab"></component>
</div>

CSS

.tab-button {
        padding: 6px 10px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border: 1px solid #ccc;
        cursor: pointer;
        background: #f0f0f0;
        margin-bottom: -1px;
        margin-right: -1px;
    }
    
    .tab-button:hover {
        background: #67C23A;
    }
    
    .tab-button.active {
        background: #67C23A;
    }
    
    .tab {
        border: 1px solid #ccc;
        padding: 10px;
    }

JavaScript

Vue.component('tab-科长', {
        template: '<div>一共有100个科长</div>'
    })
    Vue.component('tab-处长', {
        template: '<div>一种有50个处长</div>'
    })
    Vue.component('tab-局长', {
        template: '<div>一共有10个局长</div>'
    })

    new Vue({
        el: '#dynamic-component-demo',
        data: {
            currentTab: '局长',
            tabs: ['科长', '处长', '局长']
        },
        computed: {
            currentTabComponent: function() {
                return 'tab-' + this.currentTab
            }
        }
    })