image.png

<template>
  <div class="btnlist">
    <el-button size="small" v-for="(item, index) in btnList" :key="item.index" class="btn" :class="{ isActive:isChange === index}" plain @click="tabBtn(index)">
        {{item.name}}
    </el-button>
    <!--點擊按鈕進行切換-->
    <component-one v-show="isChange === 0"></component-one>
    <component-two v-show="isChange === 1"></component-two>
  </div>
</template>        

<script>
import  componentOne from './components/component-one.vue'
import  componentTwo from './components/component-Two.vue'
export default {
  data () {
    return {
      btnList: [
        {name: '按鈕一'},
        {name: '按鈕二'},
      ],
      isChange: 0,
    }
  },
  components: {
    componentOne,
    componentTwo
  },
  methods: {
    tabBtn (index) {
      this.isChange = index
    }
  }
}
</script>
<style scoped>
  .btnlist {
    padding-left: 10px;
  }
  .isActive {
    background: #ecf5ff!important;
    border-color: #2187e7!important;
    color: #fff;
  }
  .btn {
    color: #2187e7;
    background: #fff;
    border-color: #b3d8ff;
  }
</style>