技術標籤：vue

vue官網推薦使用

<div>
   <el-button v-for="(item,index) in com_list" :key="index" @click="currentTab = item">{{item}}</el-button>
   <component :is="iscomponent"></component>
</div>

// tab-home tab-hotel  tab-post  這是三個元件
 

com_list: ['home', 'hotel', 'post'],
currentTab : "Home"   //預設展示tab-home

computed: {
  iscomponent() {
    return 'tab-' + this.currentTab.toLowerCase()
  }
},

實際上就是 點選按鈕將陣列的值賦值給currentTab 再計算屬性 計算iscomponent的值最終得到元件名。從而生成動態元件

效果