两个按钮点击的颜色切换问题

最新推荐文章于 2024-09-11 15:33:18 发布

雪碧聊技术

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量143

点赞数 4

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_63981644/article/details/141997547

版权

以下基于element-plus组件库。

①导入两个按钮


         <el-row class="mb-4">
            <el-button
              :class="[{ activeBtn: btnFlag }]"
              style="border: 1px white solid; margin-left: 0px"
              @click="qiyong"
              >启用</el-button
            >
            <el-button
              :class="[{ activeBtn: !btnFlag }]"
              style="border: 1px white solid; margin-left: 0px"
              @click="tingyong"
              >停用</el-button
            >
          </el-row>

②定义一个变量，控制按钮的效果是否显示

let btnFlag = ref(true)

③最重要的是，给①中的activeBtn选择器一点样式

<style scoped>
/* 按钮点击之后的样式 */
.activeBtn {
    color: #1890ff;
    background: rgb(232, 244, 255);
}
</style>

④查看效果

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

雪碧聊技术

关注关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两个按钮点击的颜色切换问题

③最重要的是，给①中的activeBtn选择器一点样式。以下基于element-plus组件库。②定义一个变量，控制按钮的效果是否显示。
复制链接

扫一扫

css多个按钮点击变颜色,用事件与CSS改变按钮不同状态下的颜色

weixin_35382961的博客

08-03

2615

目标效果：表单的群发按钮，在鼠标悬停时为深蓝色，鼠标离开时为淡蓝色。HTML代码：群发预览CSS代码：.btn{color:#ffffff;background:#44b549;padding-top:3px;border-top: 1px solid #44b549;border-right: 1px solid #44b549;border-bottom: 1px solid ...

点击按钮切换颜色

qq_44538246的博客

05-17

4396

开发工具与关键技术：VS, ASP.NET MVC 作者：谭威撰写时间：2019年5月15日上图就是完成后的效果图，其实这些按钮的原始颜色都是白色的，为了少张图，我将偶数行的按钮都换成另外的颜色，讲到这里，想必不少人已经猜到我所要讲的地方了，没错，我要讲的就是点击操作下方的按钮后它就会从原始的白色切换到绿色，再点击一次，它又变成白色的按钮；看过我之前的文章的人知道，我之前讲过一个类似的，不过...

参与评论您还未登录，请先登录后发表或查看评论

【JavaScript】点击那个按钮，那个按钮变色，其他方案

咔咔博客

01-10

3809

author：咔咔 wechat：fangkangfk 方案： 1.先将第一次显示的给给默认样式，也就是添加checked的class 2.如果点击了之后传递一个参数给后台，后台assign到前端，使用参数判断，根据参数就可以判断谁需要加checked 注意：这只适合数据固定的情况下，如果数据不固定还是使用JavaScript来做 ...

JS 点击按钮，随机变色

weixin_42468212的博客

08-16

2155

css部分 body{ taxt-align:center; } #box{ margin: 100px auto 0; } #btn{ width: 100px;height: 50px; } html部分 <div id="box"></div> <button id="btn">变色</button> JS 部分 <s...

js实现点击按钮变换背景颜色

热门推荐

无

06-29

2万+

js实现点击按钮变换背景颜色 function aa(){ document.bgColor="Orange"; } function change(c){ document.bgColor=c; }

js点击按钮变色

weixin_30268921的博客

11-21

1243

function changeColor(e){ 循环所有的按钮，把他们变回原色 for(var i=1;i<=3;i++){ var menu=document.getElementById("button"+i);id属性 menu.style.backgroundColor="#F0F0F0"; menu.style.color="#000000"; } ...

核心项目：MyRPC——基于Java语言实现的RPC框架

燕双嘤

09-05

8073

RPC：Remote Procedure Call，即远程过程调用。远程过程调用是一种像调用本地过程一样调用远程机器上的过程，而不需要了解网络细节的远程过程访问支持机制。由于基于套接字的开发方式，因此带来了开发繁琐和排错困难的问题。

vue实现点击两个按钮互相切换背景色

文龙刚的博客

10-11

2368

vue实现点击两个按钮互相切换背景色

JavaScript多个按钮实现切换不同的颜色

YIC020920的博客

11-29

2596

以上的版本需要思考的地方：如果需要触发更多的事件，一个个的调用还是非常麻烦的，需要我们可以试试用动态实现，将颜色存放在数组里。可以在评论上展示一下你们的见解，怎样实现更多按钮点击之后可以切换更多的颜色！div样式的中的id需要调整一下，你们结合Script代码修改一下吧。展示一下它的div情况，css样式你们可以自行设计哈！仅供参考，依然有需要优化的地方，发挥你的想象去思考吧！，非常麻烦，但是实现起来相对比较容易。的知识点，整体还是比较好理解的。仅供参考，仍然有需要优化的地方。版本实现了、、优化，运用到。

vue实现点击按钮切换背景颜色的示例代码

10-15

`getMoney`方法用于更新`dynamic`的值，使得每次点击一个按钮，只有被点击的按钮拥有`colorChange`类，其他按钮的背景颜色恢复原状。 6. **总结**：Vue的响应式系统使得我们在数据变化时可以自动更新视图。通过绑定...

JS实现按钮颜色切换效果

10-19

1. btn1(), btn2(), btn3() 这三个函数分别用于设置其他两个按钮的字体颜色为黑色，并将被点击按钮的字体颜色设置为红色。这里我们注意到，每个函数都设置了三个按钮的字体颜色，但只有其中一个按钮的字体颜色被设置...

Android开发实现按钮点击切换背景并修改文字颜色的方法

08-28

"Android开发实现按钮点击切换背景并修改文字颜色的方法" Android开发实现按钮点击切换背景并修改文字颜色的方法是一种常见的界面交互设计，主要涉及到Android界面布局和相关属性设置技巧。下面将详细介绍这种方法...

使用classList来实现两个按钮样式的切换方法

08-28

通过这种方式，我们可以利用`classList`的`add()`和`remove()`方法轻松地在两个按钮之间切换样式，实现用户交互。这种方法比直接操作`style`属性更灵活，因为它允许我们复用和管理CSS类，使代码更加清晰和可维护。...

CSS使用classList实现两个按钮样式的切换

09-27

通过这种方式，我们能够实现两个按钮之间的样式切换，使得用户在点击其中一个按钮时，另一个按钮的样式发生变化，提供了一种直观且易于理解的交互体验。值得注意的是，classList还有`toggle()`方法，它可以在存在时...

按钮点击变色（js小案例）

weixin_45773503的博客

04-18

4242

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...

软件著作权申请教程（超详细）（2024新版）软著申请

m0_75269526的博客

09-09

2023

软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。

js中【Worker】相关知识点详细解读

最新发布

2301_79858914的博客

09-11

468

JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。

Module “console“ has been externalized for browser compatibility.

Alvin的博客

09-07

273

在 Vue 3.5.3 中使用 Vite 作为构建工具时，如果你尝试直接从。模块外部化了，这意味着它不会在客户端环境中暴露。去除导入 error 函数的代码。函数，会遇到一个错误，提示。这是因为 Vite 默认将。Vue 3.5.3 中。

vue 两个按钮点击切换不同的字体颜色字体大小

05-27

好的，针对您的问题，可以参考如下思路： 1. 在 Vue 中，我们可以使用 `v-bind` 或简写的 `:` 来进行样式绑定。我们可以绑定不同的类名来实现不同的样式效果。 2. 对于按钮的点击事件，我们可以使用 `@click` 来监听，并在对应的方法中修改响应式数据，从而实现样式的切换。综上，我们可以编写如下代码来实现点击按钮切换不同的字体颜色和字体大小： ```html <template> <div> <p :class="{ 'text1': true, 'active': activeColor === 'red', 'large': activeSize === 'large' }">{{ text }}</p> <div> <button @click="setRed">红色字体</button> <button @click="setLarge">大号字体</button> </div> </div> </template> <script> export default { data() { return { text: 'Hello, World!', activeColor: '', activeSize: '', }; }, methods: { setRed() { this.activeColor = 'red'; }, setLarge() { this.activeSize = 'large'; }, }, }; </script> <style> p { font-size: 16px; } .text1 { color: black; } .text1.active { color: red; } .text1.large { font-size: 24px; } </style> ``` 在上述代码中，我们使用了 `:class` 来绑定类名，并将不同的类名分别绑定到 `<p>` 元素上。我们为这些类名分别定义了不同的样式，例如 `text1` 对应黑色字体，`text1.active` 对应红色字体，`text1.large` 对应更大的字号。在需要时，我们通过修改 `activeColor` 和 `activeSize` 的值来切换不同的类名，从而实现不同的样式效果。我们为两个按钮分别绑定了 `@click` 事件，并在对应的方法中修改响应式数据，从而实现样式的切换。最后，我们为 `<p>` 元素设置了默认的样式，包括字体大小和字体颜色，以及为两个按钮添加了对应的文本。