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>
相关推荐
半花7 分钟前
i18n国际语言化配置
前端
编程贝多芬10 分钟前
Promise 的场景和最佳实践
前端·javascript
Asort11 分钟前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio14 分钟前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
南雨北斗17 分钟前
JS的对象属性存储器
前端
Lotzinfly17 分钟前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
一个大苹果18 分钟前
setTimeout延迟超过2^31立即执行?揭秘JavaScript定时器的隐藏边界
javascript
开源之眼22 分钟前
React中,useState和useReducer有什么区别
前端
普郎特33 分钟前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript
可观测性用观测云42 分钟前
前端错误可观测最佳实践
前端