vue中tab栏切换

html

   <ul class="flex head">
      <li @click="flag=1" :class="{active:flag==1}">
        <span>登录</span>
        <img v-show="flag==1" src="@img/login/[email protected]" alt>
      </li>
      <li @click="flag=2" :class="{active:flag==2}">
        <span>注册</span>
        <img v-show="flag==2" src="@img/login/[email protected]" alt>
      </li>
    </ul>

 <div class="login" v-show="flag==1"></div>
  <div class="register" v-show="flag==2"></div>

css

.head {
    margin: 30px 150px;
    li {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      font-size: 34px;
      color: rgba(153, 153, 153, 1);
      &.active {
        font-size: 48px;
        color: rgba(248, 97, 40, 1);
      }
      img {
        width: 120px;
        height: 10px;
      }
    }

js

 data() {
    return {
      flag: 1
    };
  }