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>
相关推荐
MediaTea17 小时前
Python 第三方库:Flask(轻量级 Web 框架)
开发语言·前端·后端·python·flask
5***o50017 小时前
前端构建工具缓存清理,解决依赖问题
前端·缓存
lcc18718 小时前
Vue Vue与VueComponent的关系
前端·vue.js
无敌最俊朗@18 小时前
Vue 3 概况
前端·javascript·vue.js
摆烂工程师18 小时前
今天 Cloudflare 全球事故,连 GPT 和你的网站都一起“掉线”了
前端·后端·程序员
拉不动的猪18 小时前
一文搞懂:localhost和局域网 IP 的核心区别与使用场景
前端·javascript·面试
亿元程序员19 小时前
你支持游戏内显示电量、信号或时间吗?
前端
阿珊和她的猫19 小时前
HTTP:Web 世界的基石协议详解
前端·网络协议·http
未来之窗软件服务19 小时前
自建开发工具IDE(二)文件托拽读取——东方仙盟炼气期
开发语言·前端·javascript·仙盟创梦ide·东方仙盟
conkl19 小时前
构建健壮的前端请求体系:从 HTTP 状态码到 Axios 实战
前端·网络协议·http