【Vue 动态切换class】

style中写出切换的两种样式：

.active {
      color: black;
      border-bottom: #03bb7a 2px solid;
    }

    .static {
      color: rgb(158, 158, 158);
      border: none;
    }

然后创建data与methods：

data: {
        isActive: true,
        isStatic: false,
      },
methods: {
        getActive(type) {
         this.isActive = type === 'password' ? true : false
         this.isStatic = type === 'password' ? false : true
       },

当点击的是密码登录时，isActive为true，isStatic为false。这时动态绑定class，使点击密码登录时，密码登录按钮的class为active，手机登录的class为static；点击手机登录时相反：

<div class="password" 
     @click="getActive('password')" 
     :class="{active: isActive ,static: isStatic}">
   密码登录
</div>

 <div class="phone" 
      @click="getActive('code')" 
      :class="{active: !isActive ,static: !isStatic}">
    手机登录
</div>

界面的同步切换原理相同，写好样式后，div动态绑定class，使点击使想要的class为true即可：
style:

.hide {
      display: none;
    }

html:

<div v-bind:class="{hide: !isActive}">