active点击不变色:没有给元素添加或删除 .active 类

问题 :可以悬浮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>
相关推荐
狗头大军之江苏分军9 小时前
Meta万人裁员亲历者自述:小扎尝到了降本的甜头
前端·后端·github
秃顶老男孩.9 小时前
web中的循环遍历
开发语言·前端·javascript
快起来搬砖了10 小时前
实现一个优雅的城市选择器组件 - Uniapp实战
开发语言·javascript·uni-app
龙在天10 小时前
vue 请求接口快慢 覆盖 解决方案
前端
可子是我的小猫10 小时前
【JS】模块(一)
javascript
跟橙姐学代码10 小时前
Python 类的正确打开方式:从新手到进阶的第一步
前端·python·ipython
Jagger_10 小时前
SonarQube:提升代码质量的前后端解决方案
前端·后端·ai编程
Becauseofyou13710 小时前
如果你刚入门Three.js,这几个开源项目值得你去学习
前端·three.js
菜市口的跳脚长颌10 小时前
前端大文件上传全攻略(秒传、分片上传、断点续传、并发控制、进度展示)
前端
不一样的少年_10 小时前
同事以为要重写,我8行代码让 Vue 2 公共组件跑进 Vue 3
前端·javascript·vue.js