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>
相关推荐
一只小阿乐2 分钟前
vue 改变查询参数的值
前端·javascript·vue.js·路由·router·网文·未花中文网
Mintopia2 分钟前
😎 HTTP/2 中的 HPACK 压缩原理全揭秘
前端·人工智能·aigc
程序员爱钓鱼10 分钟前
Node.js 编程实战:即时聊天应用 —— WebSocket 实现实时通信
前端·后端·node.js
爱迪斯通19 分钟前
Xsens为拳击康复训练带来运动数据支持
前端
2501_9481226322 分钟前
React Native for OpenHarmony 实战:Steam 资讯 App 服务条款实现
javascript·react native·react.js·游戏·ecmascript·harmonyos
奚大野...27 分钟前
uni-app手机端项目touchmove禁止页面上下拉滑动
前端·javascript·uni-app
Object~36 分钟前
4.const和iota
开发语言·前端·javascript
小小小小宇38 分钟前
前端监测界面内存泄漏
前端
掘金安东尼38 分钟前
⏰前端周刊第 448 期(2026年1月4日-1月10日)
前端·面试·github
攀登的牵牛花42 分钟前
前端向架构突围系列 - 工程化(一):JavaScript 演进史与最佳实践
前端·javascript