效果:
vue-template
<el-button-group class="fr">
<el-button class="barChartBtn" :class="{selectBtn:currSelect===1}" @click="btn1()">按钮1</el-button>
<el-button class="barChartBtn" :class="{selectBtn:currSelect===2}" @click="btn2()">按钮2</el-button>
<el-button class="barChartBtn" :class="{selectBtn:currSelect===3}" @click="btn3()">按钮3</el-button>
<el-button class="barChartBtn" :class="{selectBtn:currSelect===4}" @click="btn4()">按钮4</el-button>
<el-button class="barChartBtn" :class="{selectBtn:currSelect===5}" @click="btn5()">按钮5</el-button>
</el-button-group>
vue-data:
currSelect:1,
vue-mehods:
btn1(){
this.currSelect=1;
},
btn2(){
this.currSelect=2;
},
btn3(){
this.currSelect=3;
},
btn4(){
this.currSelect=4;
},
btn5(){
this.currSelect=5;
},
vue-style
.selectBtn{
background-color: #00b0f8;
color: #ffffff;
}