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>
相关推荐
zhouzhouya1 分钟前
码上星辰,人间烟火:我的2025
前端·程序员·代码规范
江湖yi山人1 分钟前
生产环境的log,上传到开发者的本地服务器
javascript·python
彭涛3619 分钟前
什么是MessageChannel
前端
嘉琪00118 分钟前
provide 和 inject的理解?
前端·javascript·vue.js
匆叔19 分钟前
ESLint,前端项目CTRL+S,自动保存格式化文档,超细
前端
满天星辰20 分钟前
Vue3响应式API-reactive的原理
前端·vue.js
XiaoYu200221 分钟前
第10章 SSE魔改
前端·webassembly
沙子迷了蜗牛眼23 分钟前
当展示列表使用 URL.createObjectURL 的创建临时图片、视频无法加载问题
java·前端·javascript·vue.js
爬山算法32 分钟前
Hibernate(30)Hibernate的Named Query是什么?
服务器·前端·hibernate
加油乐33 分钟前
react路由配置相关
前端·react.js·ant design