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数组,其中包含了每个按钮的id、text(按钮上显示的文本)和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中处理多个按钮的选中状态切换,通常我们会利用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快速入门 参考链接: 中文博客: 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 库,用于创建、操作和研究复杂网络的结构、动力学和功能。它提供了丰富的功能来处理图和网络数据,适合用于复杂网络分析。以下是使用 NetworkX 进行复杂网络分析的基本步骤: 安装 NetworkX: pip inst…...
【C#/C++】C#调C++的接口,给C++传结构体数组
C#调C的接口,给C传结构体数组 1、背景2、实现 1、背景 C#软件创建了一个结构体数组用来存储图像的区域信息,分别是矩形框的左上像素的xy坐标和矩形框右下像素的xy坐标。需要传入给调用的C函数的参数列表中,我们选择使用C#传入一个结构体数组…...
ctfshow SSTI注入 web369--web372
web369 这把request过滤了,只能自己拼字符了 ""[[__clas,s__]|join] 或者 ""[(__clas,s__)|join] 相当于 ""["__class__"]举个例子,chr(97) 返回的是字符 a,因为 97 是小写字母 a 的 Unicode 编码…...
Llama + Dify,在你的电脑搭建一套AI工作流
theme: smartblue 点赞 关注 收藏 学会了 本文简介 最近字节在推Coze,你可以在这个平台制作知识库、制作工作流,生成一个具有特定领域知识的智能体。 那么,有没有可能在本地也部署一套这个东西呢?这样敏感数据就不会泄露了&…...
洛谷 P9854 [CCC 2008 J1] Body Mass Index
这题让我们计算出 BMI 值,随后判断属于哪个等级。 BMI 值计算公式: 。 BMI 范围 对应信息 …...
Redis面试三道题目
针对Redis的面试题,我将从简单到困难给出三道题目,并附上参考答案的概要。 1. 简单题:请简述Redis是什么,以及它的主要优点。 参考答案: Redis简介:Redis是一个开源的、使用ANSI C语言编写、支持网络、可…...
redis的使用场景-分布式锁
使用redis的setnx命令放入数据并用此数据当锁完成业务(但是如果用户操作途中出现异常导致超出指定时间会出现问题) Service public class StockService {Autowiredprivate StockDao stockDao; //mapper注入Autowiredprivate StringRedisTemplate redisT…...
知识库系统全解析:2024年最佳9款
本文将分享9款优质团队知识库管理工具:PingCode、Worktile、石墨文档、语雀、Wolai 我来、有道云笔记、飞书文档、Confluence、Notion。 在追求高效团队运作的今天,掌握和整合知识成为了企业不可或缺的需求。但面对市场上琳琅满目的知识库管理工具&#…...
猫头虎分享:Numpy知识点一文带你详细学习np.random.randn()
🐯 猫头虎分享:Numpy知识点一文带你详细学习np.random.randn() 摘要 Numpy 是数据科学和机器学习领域中不可或缺的工具。在本篇文章中,我们将深入探讨 np.random.randn(),一个用于生成标准正态分布的强大函数。通过详细的代码示…...
QT 关于QTableWidget的常规使用
目录 一、初始化 二、封装功能用法 三、结语 一、初始化 1、设置表头 直接在ui设计界面修改或者使用QT封装的函数修改,代码如下: QStringList recList {"第一列", "第二列", "第三列"}; ui->tableWidget->setH…...
PyCharm 常用 的插件
Material Theme UI Lite:提供多种不同的页面风格,为PyCharm界面增添个性化元素。Chinese (Simplified) Language Pack:为中文用户提供简体中文的界面、菜单、提示信息,提升使用体验。Tabnine:基于人…...
理解 HTTP 请求中 Query 和 Body 的异同
本文将深入探讨HTTP请求中的两个关键要素:查询参数(Query)和请求体(Body)。我们将阐明它们之间的差异,并讨论在何种情况下使用每一种。 HTTP 请求概述 HTTP 请求是客户端(如浏览器)…...
【AI大模型】 企业级向量数据库的选择与实战
前言 ChatGPT4相比于ChatGPT3.5,有着诸多不可比拟的优势,比如图片生成、图片内容解析、GPTS开发、更智能的语言理解能力等,但是在国内使用GPT4存在网络及充值障碍等问题,如果您对ChatGPT4.0感兴趣,可以私信博主为您解决账号和环境…...
LangChain开发框架并学会对大型预训练模型进行微调(fine-tuning)
要掌握LangChain开发框架并学会对大型预训练模型进行微调(fine-tuning),你需要理解整个过程从数据准备到最终部署的各个环节。下面是这一流程的一个概览,并提供了一些关键步骤和技术点: 1. LangChain开发框架简介 La…...
VMware安装(有的时候启动就蓝屏建议换VM版本)
当你开始使用虚拟化技术来管理和运行多个操作系统时,VMware 是一个强大且广泛使用的选择。本篇博客将指导你如何安装 VMware Workstation Pro,这是一个功能强大的虚拟机软件,适用于个人和专业用户。 一、下载 VMware Workstation Pro 访问官网…...
AV1技术学习:Quantization
量化是对变换系数进行,并将量化索引熵编码。AV1的量化参数 QP 的取值范围是0 ~ 255。 一、Quantization Step Size 在给定的 QP 下,DC 系数的量化步长小于 AC 系数的量化步长。DC 系数和 AC 系数从 QP 到量化步长的映射如下图所示。当 QP 为 0 时&…...
华为云AI开发平台ModelArts
华为云ModelArts:重塑AI开发流程的“智能引擎”与“创新加速器”! 在人工智能浪潮席卷全球的2025年,企业拥抱AI的意愿空前高涨,但技术门槛高、流程复杂、资源投入巨大的现实,却让许多创新构想止步于实验室。数据科学家…...
多模态2025:技术路线“神仙打架”,视频生成冲上云霄
文|魏琳华 编|王一粟 一场大会,聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中,汇集了学界、创业公司和大厂等三方的热门选手,关于多模态的集中讨论达到了前所未有的热度。其中,…...
【杂谈】-递归进化:人工智能的自我改进与监管挑战
递归进化:人工智能的自我改进与监管挑战 文章目录 递归进化:人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管?3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP? 模型控制协议 (MCP) 是一种创新的协议,旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议,它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
Module Federation 和 Native Federation 的比较
前言 Module Federation 是 Webpack 5 引入的微前端架构方案,允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...
04-初识css
一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...
IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...
是否存在路径(FIFOBB算法)
题目描述 一个具有 n 个顶点e条边的无向图,该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序,确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数,分别表示n 和 e 的值(1…...
并发编程 - go版
1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程,系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...
