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>
