<template>

  <div id="demo31">

     <p>-----------------组件基础之动态tab组件一---------------------</p>

    <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>

</template>

<script>

export default {

  components: {

    tabhome: {

      template: "<div>Home component<div>"

    },

    tabpost: {

      template: "<div>Posts component<div>"

    },

    tabarchive: {

      template: "<div>Archive component<div>"

    }

  },

  data() {

    return {

      currentTab: "Home",

      tabs: ["Home", "Post", "Archive"]

    };

  },

  computed: {

    currentTabComponent() {

      return "tab" + this.currentTab.toLowerCase();

    }

  }

};

</script>

<style>

.tab-button {

  padding: 6px 10px;

  border-top-left-radius: 3px;

  border-top-right-radius: 3px;

  border: 1px sollid #ccc;

  cursor: pointer;

  background: #f0f0f0;

  margin-bottom: -1px;

  margin-right: -1px;

}

.tab-button:hover {

  background: #e0e0e0;

}

.tab-button .active {

  background: #e0e0e0;

}

.tab {

  border: 1px solid #ccc;

  padding: 10px;

}

</style>

<template>

  <div id="demo32">

     <p>-----------------组件基础之动态tab组件二---------------------</p>

    <button

      v-for="(tab,index) in tabs"

      v-bind:key="index"

      v-bind:class="['tab-button', { active: currentIndex === index }]"

      v-on:click="currentIndex = index"

    >{{ tab }}</button>

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

  </div>

</template>

<script>

export default {

  components: {

    tab_home: {

      template: "<div>Home component<div>"

    },

    tab_post: {

      template: "<div>Posts component<div>"

    },

    tab_archive: {

      template: "<div>Archive component<div>"

    }

  },

  data() {

    return {

      currentIndex:0,

      tabs: ["Home", "Post", "Archive"]

    };

  },

  computed: {

    currentTabComponent() {

      return 'tab_'+this.tabs[this.currentIndex].toLowerCase()

    }

  }

};

</script>

<style>

.tab-button {

  padding: 6px 10px;

  border-top-left-radius: 3px;

  border-top-right-radius: 3px;

  border: 1px sollid #ccc;

  cursor: pointer;

  background: #f0f0f0;

  margin-bottom: -1px;

  margin-right: -1px;

}

.tab-button:hover {

  background: #e0e0e0;

}

.tab-button .active {

  background: #e0e0e0;

}

.tab {

  border: 1px solid #ccc;

  padding: 10px;

}

</style>