vue实现简易选项卡

首先看看效果图，也是很简单的一个demo

前两天写了一个简易选项卡，用的方法比较麻烦，所以在此基础上，做出了整改

一样的，绑定事件委托，给没有给li绑定class名

在此基础上，可以说说切换的时候那条短的下划线的做法，在里面再放一个span标签就可以了

  <ul @click="qiehuan">
            <li class="1" style="color:#23c993">房源<span style="border:1px solid #23c993"></span></li>
            <li class="2" >小区<span></span></li>
            <li class="3" >找经纪人<span></span></li>
            <li class="4" >优秀经纪人<span></span></li>
            <li class="5" >违规经纪人<span></span></li>
          </ul>

span对应的css样式

    ul {
      display: flex;
      align-items: center;
      li {
        font-size: 16px;
        font-weight: 700;
        margin-left: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        span{
              display: block;
            margin-top: 3px;
            width: 10px;
            border: 1px solid #fff;
        }
      }
      li:hover{
        color: #23c993;
        span{
          
            border: 1px solid #23c993;
        }
      }
    }

选项卡切换的js代码，这个比较容易实现，获取的classname赋值给index,用index来控制我们选项卡切换

const qiehuan=(e)=>{
    index.value=e.target.className*1;
}

切换的代码，用v-if进行判断index的值，跟我们的classname进行对应即可

<div style="width:1170px;margin:auto">
     <div v-if="index==1">房源呀</div>
     <div v-else-if="index==2">小区呀</div>
     <div v-else-if="index==3">找经纪人呀</div>
     <div v-else-if="index==4">优秀经纪人呀</div>
     <div v-else-if="index==5">违规经纪人呀</div>
    </div>