绑定数据进行【 ?::】判断
利用点击事件进行切换
样式
代码
<template>
<div class="tab">
<div :class="[checked?'last':'next']"
@click="changeYears" >
<div>上半年</div>
</div>
<div :class="[checked?'next':'last']"
@click="changeYears" >
<div>下半年</div>
</div>
</div>
</template>
<script setup>
let checked = ref(true)
let changeYears = () =>{
checked.value = !checked.value
}
</script>
<style scoped>
.last{
width: 50%;
height: 31px;
background-color: #48ECE7;
flex: 1;
font-size: 15px;
line-height: 30px;
text-align: center;
cursor: pointer;
color: #020C2E;
}
.next{
width: 50%;
height: 31px;
flex: 1;
text-align: center;
font-size: 15px;
line-height: 13px;
cursor: pointer;
padding-top: 20px;
}
</style>