使用class绑定加上button按钮来自定义一个简单的标签页
<button :class="radio==1 ?'tableChange':'table'" @click="getEchart(1)">空气质量</button> <button :class="radio==2 ?'tableChange':'table'" @click="getEchart(2)">温度</button> <button :class="radio==3 ?'tableChange':'table'" @click="getEchart(3)">降水量</button> <button :class="radio==4 ?'tableChange':'table'" @click="getEchart(4)">紫外线</button> style里面的代码 .tableChange{ width:80px; height:50px; background: rgba(135,206,250, 1); color: #4682B4; border: none; font-weight: bold; outline:none; cursor: pointer; margin: 4px 1px; } .table{ width:80px; height:50px; background: rgba(135,206,250, 0.5); color: #4682B4; border: none; font-weight: bold; outline:none; cursor: pointer; margin: 4px 1px; } 效果图