当前位置: 首页 > news >正文

js-vue中多个按钮状态选中类似于复选框与单选框实现

1.vue中多个按钮状态选中类似于复选框

在Vue中处理多个按钮的选中状态切换,通常我们会利用Vue的响应式数据系统来追踪每个按钮的选中状态。

  html

<div id="app">  <button  v-for="button in buttons"  :key="button.id"  :class="{ active: button.isSelected }"  @click="toggleSelection(button.id)"  >  {{ button.text }}  </button>  
</div>

js

new Vue({  el: '#app',  data: {  buttons: [  { id: 1, text: '按钮1', isSelected: false },  { id: 2, text: '按钮2', isSelected: false },  { id: 3, text: '按钮3', isSelected: false }  ]  },  methods: {  toggleSelection(id) {  // 找到并点击的按钮并切换其选中状态  this.buttons.forEach(button => {  if (button.id === id) {  button.isSelected = !button.isSelected;  }  });  }  }  
});

 css

new Vue({  el: '#app',  data: {  buttons: [  { id: 1, text: '按钮1', isSelected: false },  { id: 2, text: '按钮2', isSelected: false },  { id: 3, text: '按钮3', isSelected: false }  ]  },  methods: {  toggleSelection(id) {  // 找到并点击的按钮并切换其选中状态  this.buttons.forEach(button => {  if (button.id === id) {  button.isSelected = !button.isSelected;  }  });  }  }  
});

        定义一个buttons数组,其中包含了每个按钮的idtext(按钮上显示的文本)和isSelected按钮的选中状态)。

        使用v-for指令来遍历buttons数组,并为每个按钮绑定了一个点击事件处理器toggleSelection,该处理器接收按钮的id作为参数。当按钮被点击时,toggleSelection方法会根据id找到对应的按钮,并切换其isSelected属性的值

        使用:class绑定来根据按钮的isSelected状态动态添加active类,以改变按钮的样式来表示其选中状态。

2.vue中多个按钮状态选中类似于单选框

        实现类似单选框的功能,即在一组按钮中只能同时选中一个,你可以通过维护一个变量来记录当前选中的按钮的id,并在点击按钮时更新这个变量。然后,根据这个变量来设置每个按钮的选中状态。 

<div id="app">  <button  v-for="button in buttons"  :key="button.id"  :class="{ active: selectedButtonId === button.id }"  @click="selectButton(button.id)"  >  {{ button.text }}  </button>  
</div>  <script>  
new Vue({  el: '#app',  data: {  buttons: [  { id: 1, text: '按钮1' },  { id: 2, text: '按钮2' },  { id: 3, text: '按钮3' }  ],  selectedButtonId: null // 用来记录当前选中的按钮的id  },  methods: {  selectButton(id) {  // 更新当前选中的按钮id  this.selectedButtonId = id;  }  }  
});  
</script>  <style>  
.active {  background-color: blue;  color: white;  
}  
</style>

  buttons数组包含了所有按钮的信息,而selectedButtonId变量用于跟踪当前选中的按钮的id。每个按钮都绑定了一个点击事件处理器selectButton,当按钮被点击时,该处理器会更新selectedButtonId的值为被点击按钮的id

相关文章:

js-vue中多个按钮状态选中类似于复选框与单选框实现

1.vue中多个按钮状态选中类似于复选框 在Vue中处理多个按钮的选中状态切换&#xff0c;通常我们会利用Vue的响应式数据系统来追踪每个按钮的选中状态。 html <div id"app"> <button v-for"button in buttons" :key"button.id" :c…...

ObservableCollection新增数据前判断数据是否存在

public class MyDataModel {public int Id { get; set; }public string Name { get; set; }}public static void Main(){// 创建 ObservableCollectionObservableCollection<MyDataModel> myDataCollection new ObservableCollection<MyDataModel>{new MyDataMode…...

DBus快速入门

DBus快速入门 参考链接&#xff1a; 中文博客&#xff1a; https://www.e-learn.cn/topic/1808992 https://blog.csdn.net/u011942101/article/details/123383195 https://blog.csdn.net/weixin_44498318/article/details/115803936 https://www.e-learn.cn/topic/1808992 htt…...

SQL Server 设置端口号:详细步骤与注意事项

目录 一、了解SQL Server端口号的基础知识 1.1 默认端口号 1.2 静态端口与动态端口 二、使用SQL Server配置管理器设置端口号 2.1 打开SQL Server配置管理器 2.2 定位到SQL Server网络配置 2.3 修改TCP/IP属性 2.4 重启SQL Server服务 三、注意事项 3.1 防火墙设置 3…...

Python面试题:结合Python技术,如何使用NetworkX进行复杂网络分析

NetworkX 是一个强大的 Python 库&#xff0c;用于创建、操作和研究复杂网络的结构、动力学和功能。它提供了丰富的功能来处理图和网络数据&#xff0c;适合用于复杂网络分析。以下是使用 NetworkX 进行复杂网络分析的基本步骤&#xff1a; 安装 NetworkX&#xff1a; pip inst…...

【C#/C++】C#调C++的接口,给C++传结构体数组

C#调C的接口&#xff0c;给C传结构体数组 1、背景2、实现 1、背景 C#软件创建了一个结构体数组用来存储图像的区域信息&#xff0c;分别是矩形框的左上像素的xy坐标和矩形框右下像素的xy坐标。需要传入给调用的C函数的参数列表中&#xff0c;我们选择使用C#传入一个结构体数组…...

ctfshow SSTI注入 web369--web372

web369 这把request过滤了&#xff0c;只能自己拼字符了 ""[[__clas,s__]|join] 或者 ""[(__clas,s__)|join] 相当于 ""["__class__"]举个例子&#xff0c;chr(97) 返回的是字符 a&#xff0c;因为 97 是小写字母 a 的 Unicode 编码…...

Llama + Dify,在你的电脑搭建一套AI工作流

theme: smartblue 点赞 关注 收藏 学会了 本文简介 最近字节在推Coze&#xff0c;你可以在这个平台制作知识库、制作工作流&#xff0c;生成一个具有特定领域知识的智能体。 那么&#xff0c;有没有可能在本地也部署一套这个东西呢&#xff1f;这样敏感数据就不会泄露了&…...

洛谷 P9854 [CCC 2008 J1] Body Mass Index

这题让我们计算出 BMI 值&#xff0c;随后判断属于哪个等级。 BMI 值计算公式&#xff1a; ​​​​​​​ ​​​​​​​ ​​​​​​​ ​​​​​​​ ​​​​​​​。 BMI 范围 对应信息 …...

Redis面试三道题目

针对Redis的面试题&#xff0c;我将从简单到困难给出三道题目&#xff0c;并附上参考答案的概要。 1. 简单题&#xff1a;请简述Redis是什么&#xff0c;以及它的主要优点。 参考答案&#xff1a; Redis简介&#xff1a;Redis是一个开源的、使用ANSI C语言编写、支持网络、可…...

redis的使用场景-分布式锁

使用redis的setnx命令放入数据并用此数据当锁完成业务&#xff08;但是如果用户操作途中出现异常导致超出指定时间会出现问题&#xff09; Service public class StockService {Autowiredprivate StockDao stockDao; //mapper注入Autowiredprivate StringRedisTemplate redisT…...

知识库系统全解析:2024年最佳9款

本文将分享9款优质团队知识库管理工具&#xff1a;PingCode、Worktile、石墨文档、语雀、Wolai 我来、有道云笔记、飞书文档、Confluence、Notion。 在追求高效团队运作的今天&#xff0c;掌握和整合知识成为了企业不可或缺的需求。但面对市场上琳琅满目的知识库管理工具&#…...

猫头虎分享:Numpy知识点一文带你详细学习np.random.randn()

&#x1f42f; 猫头虎分享&#xff1a;Numpy知识点一文带你详细学习np.random.randn() 摘要 Numpy 是数据科学和机器学习领域中不可或缺的工具。在本篇文章中&#xff0c;我们将深入探讨 np.random.randn()&#xff0c;一个用于生成标准正态分布的强大函数。通过详细的代码示…...

QT 关于QTableWidget的常规使用

目录 一、初始化 二、封装功能用法 三、结语 一、初始化 1、设置表头 直接在ui设计界面修改或者使用QT封装的函数修改&#xff0c;代码如下&#xff1a; QStringList recList {"第一列", "第二列", "第三列"}; ui->tableWidget->setH…...

PyCharm 常用 的插件

Material Theme UI Lite&#xff1a;‌提供多种不同的页面风格&#xff0c;‌为PyCharm界面增添个性化元素。‌Chinese (Simplified) Language Pack&#xff1a;‌为中文用户提供简体中文的界面、‌菜单、‌提示信息&#xff0c;‌提升使用体验。‌Tabnine&#xff1a;‌基于人…...

理解 HTTP 请求中 Query 和 Body 的异同

本文将深入探讨HTTP请求中的两个关键要素&#xff1a;查询参数&#xff08;Query&#xff09;和请求体&#xff08;Body&#xff09;。我们将阐明它们之间的差异&#xff0c;并讨论在何种情况下使用每一种。 HTTP 请求概述 HTTP 请求是客户端&#xff08;如浏览器&#xff09…...

【AI大模型】 企业级向量数据库的选择与实战

前言 ChatGPT4相比于ChatGPT3.5,有着诸多不可比拟的优势&#xff0c;比如图片生成、图片内容解析、GPTS开发、更智能的语言理解能力等&#xff0c;但是在国内使用GPT4存在网络及充值障碍等问题&#xff0c;如果您对ChatGPT4.0感兴趣&#xff0c;可以私信博主为您解决账号和环境…...

LangChain开发框架并学会对大型预训练模型进行微调(fine-tuning)

要掌握LangChain开发框架并学会对大型预训练模型进行微调&#xff08;fine-tuning&#xff09;&#xff0c;你需要理解整个过程从数据准备到最终部署的各个环节。下面是这一流程的一个概览&#xff0c;并提供了一些关键步骤和技术点&#xff1a; 1. LangChain开发框架简介 La…...

VMware安装(有的时候启动就蓝屏建议换VM版本)

当你开始使用虚拟化技术来管理和运行多个操作系统时&#xff0c;VMware 是一个强大且广泛使用的选择。本篇博客将指导你如何安装 VMware Workstation Pro&#xff0c;这是一个功能强大的虚拟机软件&#xff0c;适用于个人和专业用户。 一、下载 VMware Workstation Pro 访问官网…...

AV1技术学习:Quantization

量化是对变换系数进行&#xff0c;并将量化索引熵编码。AV1的量化参数 QP 的取值范围是0 ~ 255。 一、Quantization Step Size 在给定的 QP 下&#xff0c;DC 系数的量化步长小于 AC 系数的量化步长。DC 系数和 AC 系数从 QP 到量化步长的映射如下图所示。当 QP 为 0 时&…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

LOOI机器人的技术实现解析:从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

Spring Security 认证流程——补充

一、认证流程概述 Spring Security 的认证流程基于 过滤器链&#xff08;Filter Chain&#xff09;&#xff0c;核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤&#xff1a; 用户提交登录请求拦…...

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...