问题 :可以悬浮hover变色但点击active就是不变色;
原因 :没有给元素添加或删除 .active 类;(现在有点明白这句话啥意思了。。。)
:class="{ active: loginFlag === 1 }"
:是 Vue 的类名绑定语法,它会根据 loginFlag 的值动态地添加或删除 .active 类。当 loginFlag 等于 1 时,item1 将获得 .active 类,从而应用相应的样式。
html
<div class="item1" @click="loginFlag = 1">{{ $t('login.password_login') }}</div>
css
.item1 {
font-size: 20px;
}
item1:hover {
cursor: pointer;
color: #0862a3;
}
item1.active {
color: #0862a3;
font-weight: bold;
}
解决:
html
<div class="item1" @click="loginFlag = 1" :class="{ active: loginFlag === 1 }">{{ $t('login.password_login') }}</div>