1 <template>
<template>
<div>
<button :class="{ active: activeButton === '1m' }" @click="handleButtonClick('1m')"">1m</button>
<button :class="{ active: activeButton === '5m' }" @click="handleButtonClick('5m')"">5m</button>
<button :class="{ active: activeButton === '30m' }" @click="handleButtonClick('30m')"">30m</button>
<button :class="{ active: activeButton === 'daily' }" @click="handleButtonClick('daily')"">日K</button>
<button :class="{ active: activeButton === 'weekly' }" @click="handleButtonClick('weekly')"">周K</button>
</div>
</template>
2 data
data() {
return {
activeButton: null
};
methods: {
handleButtonClick(value) {
this.activeButton = value
console.log(value, '----------------')
},
}
}
3 less
.button-container button.active {
background-color: red;
color: white;
}