组件基础之动态tab组件

最新推荐文章于 2021-01-12 07:56:45 发布

weixin_30500473

最新推荐文章于 2021-01-12 07:56:45 发布

阅读量224

点赞数

原文链接：http://www.cnblogs.com/shy1766IT/p/11001604.html

版权

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

demo2:

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