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

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

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

相关文章

MATLAB绘制方波、锯齿波、三角波、正弦波和余弦波、

一、引言 MATLAB是一种具有很强的数值计算和数据可视化软件&#xff0c;提供了许多内置函数来简化数学运算和图形的快速生成。在MATLAB中&#xff0c;你可以使用多种方法来快速绘制正弦波、方波和三角波。以下是一些基本的示例&#xff0c;展示了如何使用MATLAB的命令来实现正弦…

数据科学统计面试问题 -40问

前 40 名数据科学统计面试问题 一、介绍 正如 Josh Wills 曾经说过的那样&#xff0c;“数据科学家是一个比任何程序员都更擅长统计、比任何统计学家都更擅长编程的人”。统计学是数据科学中处理数据及其分析的基本工具。它提供了工具和方法&#xff0c;可帮助数据科学家获得…

第五节shell脚本中的运行流程控制(5.2)

b)应答语句中的变量 #!/usr/bin/expect spawn sh ask.sh set timeout 5 set NAME [ lindex $argv 0 ] set AGE [ lindex $argv 1 ] set SUB [ lindex $argv 2 ] set FEEL [ lindex $argv 3 ] expect {"name" { send "$NAME\r";exp_continue }"old&qu…

【React】条件渲染:深入探讨高效开发技巧与最佳实践

文章目录 一、什么是条件渲染&#xff1f;二、条件渲染的实现方式三、条件渲染的最佳实践四、复杂条件渲染的实现 在现代前端开发中&#xff0c;React 已成为开发者构建用户界面的首选框架之一。React 的强大之处在于其组件化和状态管理能力&#xff0c;而条件渲染则是 React 开…

Linux Vim教程(六):文件操作与保存

目录 1. 打开与关闭文件 1.1 打开文件 1.2 关闭文件 1.3 保存文件 2. 创建和删除文件 2.1 创建新文件 2.2 删除文件 3. 文件浏览与导航 3.1 切换文件 3.2 文件列表 4. 文件保存技巧 4.1 强制保存 4.2 保存为新文件 4.3 自动保存 5. 文件操作的高级技巧 5.1 分割…

防火墙限制docker了

今天有个安全方面的需求&#xff0c;演示环境禁止将3306等高危端口暴露到外网。 于是同事开启了防火墙&#xff0c;仅将应用端口暴露。结果导致演示环境无法使用。 由于公司的应用是基于docker部署的。结果他问我为什么同一台机器&#xff0c;应用无法访问mysql。 docker对于…

ELK Stack入门之部署EFK架构

前言&#xff1a; 日志分析对于现代IT系统来说至关重要&#xff0c;它可以帮助组织机构理解和优化其业务和技术基础设施。以下是日志分析的一些重要性方面&#xff1a; 问题诊断与故障排除&#xff1a; 当系统发生故障或出现异常时&#xff0c;通过对相关日志进行分析&#xf…

SQL labs-SQL注入(五,使用sqlmap进行cookie注入)

本文仅作为学习参考使用&#xff0c;本文作者对任何使用本文进行渗透攻击破坏不负任何责任。 引言&#xff1a; Cookie 是一些数据, 存储于你电脑上的文本文件中。当 web 服务器向浏览器发送 web 页面时&#xff0c;在连接关闭后&#xff0c;服务端不会记录用户的信息。Cookie…

第十一章 数据结构

第十一章 数据结构 11.1 数组 数组是元素的顺序集合&#xff0c;通常这些元素具有相同的数据类型 索引表示元素在数组中的顺序号&#xff0c;顺序号从数组开始处计数 数组元素通过索引被独立给出了地址&#xff0c;数组整体上有一个名称&#xff0c;但每个元素利用数组的的…

elasticsearch 解决全模糊匹配最佳实践

事件背景&#xff1a; 某 CRM 系统&#xff0c;定义了如下两个表&#xff1a; 客户表 t_custom 字段名 类型 描述 idlong自增主键phonestring客户手机......... 客户产品关系表 t_custom_product 字段名 类型 描述 idlong自增主键custom_idlong客户idproduct_idlong产品…

【buildroot系统中qt显示屏触摸方向更改】

buildroot系统和qt的显示触摸不一致&#xff0c;qt程序出现显示触摸上下颠倒问题 操作全部在启动qt程序之前设置系统显示配置 操作全部在启动qt程序之前设置系统显示配置 我的设备是上电自启动我的qt程序&#xff0c;所以为了方便我全部在调用我的qt程序位置处修改vi /etc/ini…

vue如何适应多个页面不同的布局

在 Vue.js 中&#xff0c;要适应多个页面不同的布局&#xff0c;你可以采用以下几种方法&#xff1a; 使用动态组件 (Dynamic Components)&#xff1a; 通过使用 Vue 的动态组件&#xff0c;可以在同一个页面中根据路由动态加载不同的布局组件。 <template><component…

笔记本检测工具 | 爱回收笔记本质检系统 v1.9.6

软件简介 爱回收笔记本质检系统是一款专为笔记本电脑硬件检测而设计的软件。它以其快速的检测速度、简便的操作流程和直观的检测结果&#xff0c;为用户提供了一种高效、易懂的硬件检测解决方案。 这款软件不仅适用于对电脑硬件有一定了解的用户&#xff0c;也特别适合对硬件…

SQL进阶:解锁高级特性,深化数据洞察

掌握了SQL的基础知识后&#xff0c;进一步探索其高级特性将帮助您更高效地处理复杂数据&#xff0c;深化数据分析的广度和深度。本文将带您领略SQL的高级功能&#xff0c;包括窗口函数、存储过程、触发器以及高级查询技巧等&#xff0c;让您在数据处理的道路上更进一步。 一、…

C#使用csvhelper实现csv的操作

新建控制台项目 安装csvhelper 33.0.1 写入csv 新建Foo.cs namespace CsvSut02;public class Foo {public int Id { get; set; }public string Name { get; set; } }批量写入 using System.Globalization; using CsvHelper; using CsvHelper.Configuration;namespace Csv…

如何为WordPress网站设置多语言站点

随着全球化的发展&#xff0c;拥有一个支持多语言的站点已成为提升用户体验、扩大受众范围的重要手段。本文将详细介绍如何为WordPress网站设置多语言站点&#xff0c;提供两种最佳方案详解&#xff0c;帮助您轻松实现多语言站点的搭建与管理。无论您是选择在同一站点内发布多语…

FastGPT 知识库搜索测试功能解析(一)

本文以 FastGPT 知识库的搜索测试功能为入口,分析 FastGPT 的知识检索流程。 一、搜索功能介绍 1.1 整体介绍 搜索测试功能包含三种类型:语义检索、全文检索、混合检索。 语义检索:使用向量进行文本相关性查询,即调用向量数据库根据向量的相似性检索; 全文检索:使用…

我在Vscode学Java集合类

Java集合类 一、集合1.1 集合和数组之间的对比1.2 集合框架的核心接口1.3 集合框架中的实现类单列集合双列集合 1.4 集合框架的特点 二、 Collection集合与Iterator迭代器2.1 Collection的概述2.1.1 常用方法增加元素的方法修改元素的方法删除元素的方法查询元素的方法遍历集合…

docker centos镜像 npm安装包时报错“npm ERR! code ECONNRESET”

1.采用新的镜像地址 npm config set registry https://registry.npmmirror.com2.清理缓存 npm cache clean --force3.安装yarn npm install -g yarn4. 安装模块 在node_modules 同级目录执行下面命令&#xff1a; yarn add napi-build-utils env-paths express ejs cors …

Node.js基础【学习笔记】

一、命令行窗口、CMD窗口、终端、shell 1、打开命令行窗口 #mermaid-svg-S0niOoYZi1WPuV9Y {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-S0niOoYZi1WPuV9Y .error-icon{fill:#552222;}#mermaid-svg-S0niOoYZi1WP…