vue3 样式切换改变颜色

最新推荐文章于 2024-08-22 16:04:37 发布

到嘴的鸭子飞了

最新推荐文章于 2024-08-22 16:04:37 发布

阅读量159

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_56615245/article/details/140566841

版权

绑定数据进行【？：：】判断

利用点击事件进行切换

样式

代码

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