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 时&…...
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点: 路径验证:确保相对路径.…...
基于ASP.NET+ SQL Server实现(Web)医院信息管理系统
医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上,开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识,在 vs 2017 平台上,进行 ASP.NET 应用程序和简易网站的开发;初步熟悉开发一…...
通过Wrangler CLI在worker中创建数据库和表
官方使用文档:Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后,会在本地和远程创建数据库: npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库: 现在,您的Cloudfla…...
8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...
python/java环境配置
环境变量放一起 python: 1.首先下载Python Python下载地址:Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个,然后自定义,全选 可以把前4个选上 3.环境配置 1)搜高级系统设置 2…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验,以及大语言模型的分析能力,我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际,我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测,聊作存档。等到明…...
【Go语言基础【12】】指针:声明、取地址、解引用
文章目录 零、概述:指针 vs. 引用(类比其他语言)一、指针基础概念二、指针声明与初始化三、指针操作符1. &:取地址(拿到内存地址)2. *:解引用(拿到值) 四、空指针&am…...
08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险
C#入门系列【类的基本概念】:开启编程世界的奇妙冒险 嘿,各位编程小白探险家!欢迎来到 C# 的奇幻大陆!今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类!别害怕,跟着我,保准让你轻松搞…...
Linux nano命令的基本使用
参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时,显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...
