1. html
<span
class="tab-control-item"
v-for="(item, index) in state.dateDims"
:key="index"
:class="{ active: item.value === state.currentIndex }"
@click="tabcontrol(item.value)"
>
<span>{{ item.label }}</span>
</span>
2. js
const state = reactive({
dateDims: [
{ label: '日', value: 'day' },
{ label: '月', value: 'month' },
{ label: '年', value: 'year' },
],
currentIndex: 'day',
});
const tabcontrol = (val) => {
state.currentIndex = val;
};
3.css
.tab-control {
width: 200px;
float: left;
text-align: center;
}
.tab-control-item {
// line-height: 30px;
}
.tab-control-item span {
font-size: 14px;
padding: 5px 2px;
margin: 5px;
color: #333333;
}
.active {
color: #0164fe;
}
.active span {
color: #0164fe;
border-bottom: 2px solid #0164fe;
}