Vue稍微高级一点的选项卡—动态组件

<template>
  <div id="app" class="app">
    <ul class="tabUl">
      <li @click="toggle(index, tab.view)" v-for="(tab, index) in tabs" :class="{active: active == index}">
          {{tab.type}}
      </li>
    </ul>
    <div class="wrapper">
      <!--每次切换组件都会重新渲染，无法保留组件上的数据。这时可以使用 keep-alive 将组件保留在内存中，避免重新渲染-->
      <keep-alive>
        <component :is="currentView"></component>
      </keep-alive>        
    </div>
  </div>
</template>

<script>
  import Tabone from './tabs/Tab-one.vue'
  import Tabtwo from './tabs/Tab-two.vue'
  import Tabthree from './tabs/Tab-three.vue'

export default {
  name: 'app',
  data () {
    return {
       currentView: "Tabone",
       active: 0,
       tabs: [
         {
           type: '新闻',
           view: "Tabone"
         },
         {
           type: '音乐',
           view: "Tabtwo"
         },
         {
           type: '娱乐',
           view: "Tabthree"
         }
       ]
    }
  },
  methods: {
    toggle(i, v) {
        this.active = i;
        this.currentView = v;
    }
  },
  components: {
    "Tabone": Tabone,
    "Tabtwo": Tabtwo,
    "Tabthree": Tabthree
  }
}
</script>

<style>

.app{
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
}
.tabUl::after{
  display: block;
  content: "";
  clear: both;
}
.active {
  color: red;
  border-bottom: 1px solid red;
}
ul li {
  padding: 0 15px;
  float:left;
  list-style: none;
}
.wrapper{
   500px;
  border: 1px solid orangered;
  text-align: center;
  height: 250px;
  line-height: 250px
}
</style>