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>
相关推荐
我命由我1234510 小时前
VSCode - Prettier 配置格式化的单行长度
开发语言·前端·ide·vscode·前端框架·编辑器·学习方法
HashTang10 小时前
【AI 编程实战】第 4 篇:一次完美 vs 五轮对话 - UnoCSS 配置的正确姿势
前端·uni-app·ai编程
JIngJaneIL10 小时前
基于java + vue校园快递物流管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js
asdfg125896310 小时前
JS中的闭包应用
开发语言·前端·javascript
kirk_wang10 小时前
Flutter 导航锁踩坑实录:从断言失败到类型转换异常
前端·javascript·flutter
梦里不知身是客1110 小时前
spark中如何调节Executor的堆外内存
大数据·javascript·spark
静小谢11 小时前
前后台一起部署,vite配置笔记base\build
前端·javascript·笔记
用户479492835691511 小时前
改了CSS刷新没反应-你可能不懂HTTP缓存
前端·javascript·面试
还好还好不是吗11 小时前
老项目改造 vue-cli 2.6 升级 rsbuild 提升开发效率300% upupup!!!
前端·性能优化