个人技术分享

问题：可以悬浮hover变色但点击active就是不变色；
原因：没有给元素添加或删除 .active 类；（现在有点明白这句话啥意思了。。。）
:class="{ active: loginFlag === 1 }"：是 Vue 的类名绑定语法，它会根据 loginFlag 的值动态地添加或删除 .active 类。当 loginFlag 等于 1 时，item1 将获得 .active 类，从而应用相应的样式。

<div class="item1" @click="loginFlag = 1">{{ $t('login.password_login') }}</div>

.item1 {
      font-size: 20px;
    }

    item1:hover {
      cursor: pointer;
      color: #0862a3;
    }

    item1.active {
      color: #0862a3;
      font-weight: bold;
    }

解决：

<div class="item1" @click="loginFlag = 1" :class="{ active: loginFlag === 1 }">{{ $t('login.password_login') }}</div>