页面

<div class="switchbtn"><span :class="{ active: isCheck == 1 }" @click="checkBtn(1)">当前</span><span :class="{ active: isCheck == 2 }" @click="checkBtn(2)">1日费率</span><span :class="{ active: isCheck == 3 }" @click="checkBtn(3)">7日费率</span><span :class="{ active: isCheck == 4 }" @click="checkBtn(4)">30日费率</span><span :class="{ active: isCheck == 5 }" @click="checkBtn(5)">1年费率</span></div>

 实现代码

<template><div class="TableRateList"><div class="switchbtn"><span :class="{ active: isCheck == 1 }" @click="checkBtn(1)">当前</span><span :class="{ active: isCheck == 2 }" @click="checkBtn(2)">1日费率</span><span :class="{ active: isCheck == 3 }" @click="checkBtn(3)">7日费率</span><span :class="{ active: isCheck == 4 }" @click="checkBtn(4)">30日费率</span><span :class="{ active: isCheck == 5 }" @click="checkBtn(5)">1年费率</span></div></div>
</template><script setup>
import { ref } from 'vue';
const isCheck = ref(1);
const checkBtn = (val) => {isCheck.value = val;
};
</script><style lang="less" scoped>
.TableRateList {.switchbtn {width: 503px;height: 36px;flex-shrink: 0;border-radius: 8px;background: #161616;display: flex;justify-content: space-between;align-items: center;margin-bottom: 15px;span {cursor: pointer;color: #909090;font-family: PingFang SC;font-size: 14px;font-weight: 600;padding: 8px 20px;&.active {color: #000;border-radius: 8px;background: #fff;}}}
}
</style>