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>
相关推荐
Marshmallowc3 小时前
CSS 布局原理:为何“负边距”是栅格系统的基石?
前端·css·面试
Rysxt_3 小时前
Vue 3 项目核心:App.vue 文件的作用与配置详解
前端·javascript·vue.js
洛阳纸贵3 小时前
JAVA高级工程师--Maven父子关系专题
java·前端·maven
ShirleyWang0123 小时前
Windows XP无法显示文件后缀名解决
css·xp·后缀名·windows xp
imkaifan3 小时前
10、vue3中针对图片的处理
前端·javascript·vue.js
柯南二号3 小时前
【大前端】【iOS】iOS 使用 Objective-C 绘制几大常见布局(UIKit / Core Graphics 实战)
前端·ios
invicinble4 小时前
对于使用html去进行前端开发的全面认识,以及过度到vue开发
前端·javascript·vue.js
我这一生如履薄冰~4 小时前
element-plus去除el-dropdown组件当鼠标移入文本时会出现边框
前端·elementui·vue
csdn_aspnet4 小时前
C# 结合 JavaScript 实现手写板签名并上传到服务器
javascript·c#
watersink4 小时前
Agent 设计模式
开发语言·javascript·设计模式