vue实现nav切换

nav点击切换实现

效果展示

data() {
  return {
    active: 0,
    nav: [{value: 0, txt: '全部'}, {value: 1, txt: '待审核'}, {value: 2, txt: '已通过'}, {value: 3, txt: '未通过'}]
  }
}

<view class="shareOrder-nav" v-if="">
  <view class="shareOrder-nav-text" :class="{'active' : active === index}" v-for="(item,index) in nav"
    :key="index" @click="changeNav(index)">{{item.txt}}
  </view>
</view>

 methods: {
  changeNav(index) {
    console.log(index);
    this.active = index;
  }
 }
 
 //scss
 .shareOrder {
  &-nav {
    display: flex;
    text-align: text-align-center;
    padding: 0 10px;
    border-bottom(#ededed, 1px, solid);

    &-text {
      flex: 1;
      position: relative;
      font：14px,
      color: #999);

      &.active {
        color: #9578d2;

        &::after {
          content: '';
          display: block;
          transform: translateX(50%);
          margin-top: 15px;
          width: 25%;
          height:3px;
          background: #9578d2;
          border-radius: 3px;
        }

      }
    }
  }
  }