日月年切换

 

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;
}