Vue3实现点击按钮实现文字变色

1.动态样式实现

1.1核心代码解释:

  • class="power-station-perspective-item-text"

    • 为这个 span 元素添加了一个 CSS 类,以便对其样式进行定义。
  • @click="clickItem(item.id)"

    • 这是一个 Vue 事件绑定。当用户点击这个 span 元素时,会触发 clickItem 方法,并将 item.id 作为参数传递给该方法。这用于记录用户点击了哪个项目。
  • :style="{ color: isChecked(item.id) ? '#cc7e17' : '' }"

    • 这是一个 Vue 动态绑定的内联样式。
    • isChecked(item.id) 会检查当前项目是否被选中(即 checkedItem.value 是否等于 item.id)。
    • 如果 isChecked(item.id) 返回 true,则 color 样式会被设置为 '#cc7e17'(一种颜色值);否则,color 样式为空字符串,表示不改变颜色。
  • {{ item.title }}

    • 这是一个 Vue 插值语法,用于显示每个项目的标题文本。
     <spanclass="power-station-perspective-item-text"@click="clickItem(item.id)":style="{ color: isChecked(item.id) ? '#cc7e17' : '' }">{{ item.title }}</span>

1.2源代码

<template><div class="power-station-perspective"><div class="flow-chart-container-item"><div class="power-station-perspective-title flow-chart-container-item-parent">{{ title }}</div><div v-for="item in buttonGroupsArr":key="item.id"class="power-station-perspective-item flow-chart-container-item location"><spanclass="power-station-perspective-item-text"@click="clickItem(item.id)":style="{ color: isChecked(item.id) ? '#cc7e17' : '' }">{{ item.title }}</span></div></div></div>
</template><script setup>
import {ref, onMounted} from "vue";const title = ref("菜单项");
const buttonGroupsArr = ref([{title: "按钮1", id: 0},{title: "按钮2", id: 1},{title: "按钮3", id: 2},{title: "按钮4", id: 3},{title: "按钮5", id: 4},
]);const checkedItem = ref(0);const isChecked = (param) => {return checkedItem.value === param;
};const clickItem = (param) => {checkedItem.value = param;
};onMounted(() => {});
</script><style scoped>
.power-station-perspective{width: 200px;
}
.flow-chart-container-item-parent {width: 100%;background: linear-gradient(90deg, rgba(0, 136, 234, 0.84) 0%,rgba(31, 38, 83, 0.85) 101.82%);
}.flow-chart-container-item {display: grid;text-align: center;padding: 3px 5px 3px 3px;margin-bottom: 3px;align-items: center;
}.power-station-perspective-item {background: rgba(0, 46, 79, 0.5);
}.location {cursor: pointer;
}.power-station-perspective-item-text {margin: 0 auto;cursor: pointer;
}.power-station-perspective-title {margin-bottom: 3px;
}
</style>

2.动态类名

 2.1核心代码解释

说明:

  • :class 绑定:

    • :class 是 Vue 提供的一个特性,用于绑定动态类名。
    • 在这里,:class 绑定了一个数组,其中包含了两个元素。
  • 数组语法:

    • 数组的第一个元素是 'power-station-perspective-item-text'
      • 这意味着每个 span 元素都会始终应用这个基础类,确保基本样式统一。
    • 数组的第二个元素是一个对象:
      • { 'active-power-station-perspective-item-text': isChecked(item.id) }
      • 这个对象的键是 'active-power-station-perspective-item-text',值是一个布尔表达式 isChecked(item.id)
      • 如果 isChecked(item.id) 返回 true,则 active-power-station-perspective-item-text 类会被应用到 span 元素上;否则,不会应用。
 :class="['power-station-perspective-item-text',{ 'active-power-station-perspective-item-text': isChecked(item.id) }]">

 2.2源代码

<template><div class="power-station-perspective"><div class="flow-chart-container-item"><div class="power-station-perspective-title flow-chart-container-item-parent">{{ title }}</div><div v-for="item in buttonGroupsArr":key="item.id"class="power-station-perspective-item flow-chart-container-item location"><spanclass="power-station-perspective-item-text"@click="clickItem(item.id)":class="['power-station-perspective-item-text',{ 'active-power-station-perspective-item-text': isChecked(item.id) }]">{{ item.title }}</span></div></div></div>
</template><script setup>
import {ref, onMounted} from "vue";const title = ref("菜单项");
const buttonGroupsArr = ref([{title: "按钮1", id: 0},{title: "按钮2", id: 1},{title: "按钮3", id: 2},{title: "按钮4", id: 3},{title: "按钮5", id: 4},
]);const checkedItem = ref(0);const isChecked = (param) => {return checkedItem.value === param;
};const clickItem = (param) => {checkedItem.value = param;
};onMounted(() => {});
</script><style scoped>
.power-station-perspective{width: 200px;
}
.flow-chart-container-item-parent {width: 100%;background: linear-gradient(90deg, rgba(0, 136, 234, 0.84) 0%,rgba(31, 38, 83, 0.85) 101.82%);
}.flow-chart-container-item {display: grid;text-align: center;padding: 3px 5px 3px 3px;margin-bottom: 3px;align-items: center;
}.power-station-perspective-item {background: rgba(0, 46, 79, 0.5);
}.location {cursor: pointer;
}.power-station-perspective-item-text {margin: 0 auto;cursor: pointer;
}
.active-power-station-perspective-item-text{color: #cc7e17;
}
.power-station-perspective-title {margin-bottom: 3px;
}
</style>

3.实现效果

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/39825.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ojdbc8-full Oracle JDBC 驱动程序的一个完整发行版各文件的功能

文章目录 1. ojdbc8.jar2. ons.jar -3. oraclepki.jar -4. orai18n.jar -5. osdt_cert.jar -6. osdt_core.jar -7. ojdbc.policy -8. README.txt -9. simplefan.jar -10. ucp.jar -11. xdb.jar - ojdbc8-full 是 Oracle JDBC 驱动程序的一个完整发行版&#xff0c;包含了连接和…

笔记——书签

书签 推荐系统 推荐系统之召回&#xff1a;https://cloud.baidu.com/article/3023263ES分页与排序&#xff1a;https://blog.csdn.net/weixin_44799217/article/details/127601687 测试 回归测试&#xff1a;https://www.cnblogs.com/codiary/p/17819289.html 机器学习 欠…

python-docx 拆分docx文档:按分节符拆分文档

本文目录 前言一、处理过程简述二、实现方式三、通过xml进行拆分1、完整代码【方式一】2、代码逻辑讲解3、实现效果图前言 本文主要处理的需求是,将一个docx文档,按节(section)分割成多个docx文档,分割后的文档保留原来文档的字体格式、页眉、页脚、水印等。 一、处理过…

SpringBoot 整合 SpringSecurity

1. 项目目录 2. pom.xml <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId><version>2.6.3</version> </dependency> <dependency><groupId>org.sprin…

【CSS】深入浅出弹性布局

CSS的弹性布局&#xff08;Flexbox&#xff09;是一种用于在容器中沿着一维方向&#xff08;水平或垂直&#xff09;来布局、对齐和分配容器内项目空间的有效方式。它旨在提供一个更加有效的方式来布局、对齐和分配容器中项目的空间&#xff0c;即使它们的大小未知或是动态变化…

【手撕面试题】React(高频知识点一)

每天10道题&#xff0c;100天后&#xff0c;搞定所有前端面试的高频知识点&#xff0c;加油&#xff01;&#xff01;&#xff01;在看文章的同时&#xff0c;希望不要直接看答案&#xff0c;先思考一下自己会不会&#xff0c;如果会&#xff0c;自己的答案是什么&#xff1f;想…

XFeat快速图像特征匹配算法

XFeat&#xff08;Accelerated Features&#xff09;是一种新颖的卷积神经网络&#xff08;CNN&#xff09;架构&#xff0c;专为快速和鲁棒的像匹配而设计。它特别适用于资源受限的设备&#xff0c;同时提供了与现有深度学习方法相比的高速度和准确性。 轻量级CNN架构&#xf…

基于Datax开发支持瀚高数据库的插件_插件开发_以及部署---国产瀚高数据库工作笔记006

如果想直接使用,开发好的插件,那么可以去下载笔者上传的,打包好的插件,直接放入到 datax安装目录的./datax/plugin/reader 或者writer中就可以了 https://download.csdn.net/download/lidew521/89495306 https://download.csdn.net/download/lidew521/89495301这两个一个…

Unity之创建与导出PDF

内容将会持续更新&#xff0c;有错误的地方欢迎指正&#xff0c;谢谢! Unity之创建与导出PDF TechX 坚持将创新的科技带给世界&#xff01; 拥有更好的学习体验 —— 不断努力&#xff0c;不断进步&#xff0c;不断探索 TechX —— 心探索、心进取&#xff01; 助力快速…

SQLMap工具详解与SQL注入防范

SQLMap工具详解与SQL注入防范 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将深入探讨SQLMap工具的详细使用方法以及如何防范SQL注入攻击。 SQL注入简介 SQL注入是一种常见的安全漏洞&am…

PyPDF2指定范围拆分PDF文件为单个页面

本文目录 前言一、指定范围拆分PDF1、过程讲解2、拆分效果图3、完整代码二、其他问题1、更改页码索引值前言 上一篇文章讲解了怎么讲一个PDF文档分割为多个单页面PDF,本文来讲解一下进阶,就是指定范围拆分PDF页面,有的时候,我们只想把PDF文档中的某几页拆分出来,而不是全…

mmcv安装失败及解决方案

假如想安装的版本是mmcv1.4.0, 但是pip install mmcv1.4.0总是失败&#xff0c;若是直接pip install mmcv会安装成功&#xff0c;但是安装的就是最新版本&#xff0c;后面代码跑起来还会报错&#xff0c;怎么办呢&#xff1f; 接下来分享一个mmcv指定版本安装的方式。 网页&a…

计算属性和侦听属性有什么区别?

在 Vue.js 中&#xff0c;计算属性&#xff08;computed properties&#xff09;和侦听属性&#xff08;watcher&#xff09;是两种处理数据变化的方式&#xff0c;它们都允许开发者根据数据的变化来更新组件的状态。虽然它们的目标类似&#xff0c;但它们的工作方式和使用场景…

【Linux】性能分析器 perf 详解(四):trace

上一篇:【Linux】性能分析器 perf 详解(三) 1、trace 1.1 简介 perf trace 类似于 strace 工具:用于对Linux系统性能分析和调试的工具。 原理是:基于 Linux 性能计数器(Performance Counters for Linux, PCL),监控和记录系统调用和其他系统事件。 可以提供关于硬件…

数据存储方案选择:ES、HBase、Redis、MySQL与MongoDB的应用场景分析

一、概述 1.1 背景 在当今数据驱动的时代&#xff0c;选择合适的数据存储技术对于构建高效、可靠的信息系统至关重要。随着数据量的爆炸式增长和处理需求的多样化&#xff0c;市场上涌现出了各种数据存储解决方案&#xff0c;每种技术都有其独特的优势和适用场景。Elasticsear…

【Threejs进阶教程-着色器篇】1. Shader入门(ShadertoyShader和ThreejsShader入门)

ThreejsShader入门 关于本Shader教程认识ShaderShader和Threejs的关系WebGLShaderThreejsShaderShadertoyShader其他Shader 再次劝退数学不好的人从ShaderToy开始Shader的代码是强类型glsl的类型&#xff0c;变量&#xff0c;内置函数&#xff0c;关键字关于uv基于UV的颜色处理…

全网最详细的软件测试面试题总结+基础知识(完整版)

一、什么是软件&#xff1f; 软件是计算机系统中的程序和相关文件或文档的总称。 二、什么是软件测试&#xff1f; 说法一&#xff1a;使用人工或自动的手段来运行或测量软件系统的过程&#xff0c;以检验软件系统是否满足规定的要求&#xff0c;并找出与预期结果之间的差异…

Android 解决 “Module was compiled with an incompatible version of Kotlin“ 问题

解决 “Module was compiled with an incompatible version of Kotlin” 问题 在Android开发中&#xff0c;有时我们会遇到Kotlin版本不兼容的问题。具体来说&#xff0c;你可能会看到如下错误&#xff1a; D:/.gradle/caches/transforms-3/caf5371a15e0d6ffc362b4a5ece9cd49…

【深海王国】小学生都能玩的语音模块?ASRPRO打造你的第一个智能语音助手(4)

Hi~ (o^^o)♪, 各位深海王国的同志们&#xff0c;早上下午晚上凌晨好呀~ 辛勤工作的你今天也辛苦啦(/≧ω) 今天大都督继续为大家带来系列——小学生都能玩的语音模块&#xff0c;帮你一周内快速学会语音模块的使用方式&#xff0c;打造一个可用于智能家居、物联网领域的语音助…