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

vue 使用el-button 如何实现多个button 单选

在 Vue 中,如果你想要实现多个 el-button 按钮的 单选(即只能选择一个按钮),可以通过绑定 v-model 或使用事件来处理按钮的选中状态。

下面是两种实现方式,分别使用 v-model 和事件监听来实现单选按钮效果:

1. 使用 v-model 实现单选效果

你可以通过 v-model 来绑定一个变量,当你点击不同的按钮时,绑定的变量会更新,从而实现单选的效果。通过这种方式,可以利用 Vue 的响应式机制来动态管理选中的按钮。

示例:
<template><div><el-buttonv-for="(item, index) in buttons":key="index":type="selected === item ? 'primary' : 'default'"@click="selectButton(item)">{{ item }}</el-button></div>
</template><script>
export default {data() {return {selected: null, // 存储当前选中的按钮buttons: ['Option 1', 'Option 2', 'Option 3'], // 按钮选项};},methods: {selectButton(item) {// 选择按钮时更新选中的项this.selected = item;},},
};
</script><style>
/* 可根据需求自定义样式 */
</style>
解释:
  • selected 用于存储当前选中的按钮。
  • v-for 循环渲染多个按钮,绑定每个按钮的 type 属性,通过判断 selecteditem 是否相等来决定按钮的样式(选中的按钮为 'primary',未选中的按钮为 'default')。
  • 当点击某个按钮时,selectButton 方法会更新 selected 的值,实现单选效果。

2. 使用 @click 和事件监听

如果你不想使用 v-model,也可以通过 @click 事件监听来手动处理选中状态。

示例:
<template><div><el-buttonv-for="(item, index) in buttons":key="index":type="selected === item ? 'primary' : 'default'"@click="selectButton(item)">{{ item }}</el-button></div>
</template><script>
export default {data() {return {selected: null, // 存储当前选中的按钮buttons: ['Option 1', 'Option 2', 'Option 3'], // 按钮选项};},methods: {selectButton(item) {if (this.selected === item) {this.selected = null; // 如果点击的是已选中的按钮,可以取消选中} else {this.selected = item;}},},
};
</script><style>
/* 可根据需求自定义样式 */
</style>
解释:
  • 与第一个示例类似,selected 用于存储选中的按钮。
  • selectButton 方法通过判断当前点击的按钮是否是已选中的按钮来决定是选中还是取消选中。这样实现了单选效果,并且可以选择取消选中。

样式定制

如果你希望按钮外观更加明显,可以通过调整 el-buttontype(如 'primary')来设置选中的按钮颜色,或使用其他样式增强视觉效果。

/* 样式示例,选中的按钮可以改变背景色等 */
.el-button--primary {background-color: #409EFF; /* 更改背景色 */color: white; /* 更改字体颜色 */
}

总结:

  • 如果你希望通过 v-model 来实现响应式的数据绑定,可以使用第一种方法。
  • 如果你想要通过事件监听来控制按钮的选中状态,可以使用第二种方法。

这两种方法都能实现单选效果,你可以根据自己的需求选择使用。

相关文章:

vue 使用el-button 如何实现多个button 单选

在 Vue 中&#xff0c;如果你想要实现多个 el-button 按钮的 单选&#xff08;即只能选择一个按钮&#xff09;&#xff0c;可以通过绑定 v-model 或使用事件来处理按钮的选中状态。 下面是两种实现方式&#xff0c;分别使用 v-model 和事件监听来实现单选按钮效果&#xff1a…...

HarmonyOS-初级(二)

文章目录 应用程序框架UIAbilityArkUI框架 &#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;HarmonyOS专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年11月28日13点10分 应用程序框架 应用程序框架可以被看做是应用模型的一种实现方式。 …...

Unity开启外部EXE程序

Unity开启外部EXE using System; using System.Collections; using System.Collections.Generic; using System.Diagnostics; using System.Runtime.InteropServices; using System.Threading.Tasks; using UnityEditor; using UnityEngine;public class Unity_OpenExe : Mono…...

CTF之密码学(埃特巴什码 )

一、基本原理 埃特巴什码的原理是&#xff1a;字母表中的最后一个字母代表第一个字母&#xff0c;倒数第二个字母代表第二个字母&#xff0c;以此类推。在罗马字母表中&#xff0c;对应关系如下&#xff1a; 常文&#xff08;明文&#xff09;&#xff1a;A B C D E F G H I …...

深入解析 PyTorch 的 torch.load() 函数:用法、参数与实际应用示例

深入解析 PyTorch 的 torch.load() 函数&#xff1a;用法、参数与实际应用示例 函数 torch.load() 是一个在PyTorch中用于加载通过 torch.save() 保存的序列化对象的核心功能。这个函数广泛应用于加载预训练模型、模型的状态字典&#xff08;state dictionaries&#xff09;、…...

ros2键盘实现车辆: 简单的油门_刹车_挡位_前后左右移动控制

参考: ROS python 实现键盘控制 底盘移动 https://blog.csdn.net/u011326325/article/details/131609340游戏手柄控制 1.背景与需求 1.之前实现过 键盘控制 底盘移动的程序, 底盘是线速度控制, 效果还不错. 2.新的底盘 只支持油门控制, 使用线速度控制问题比较多, 和底盘适配…...

ubuntu安装chrome无法打开问题

如果在ubuntu安装chrome后&#xff0c;点击chrome打开没反应&#xff0c;可以先试着在terminal上用命令打开 google-chrome 如果运行命令显示 Chrome has locked the profile so that it doesnt get corrupted. If you are sure no other processes are using this profile…...

CTF-RE 从0到N:Chacha20逆向实战 2024 强网杯青少年专项赛 EnterGame WP (END)

只想解题的看最后就好了,前面是算法分析 Chacha20 c语言是如何利用逻辑运算符拆分变量和合并的 通过百度网盘分享的文件&#xff1a;EnterGame_9acdc7c33f85832082adc6a4e... 链接&#xff1a;https://pan.baidu.com/s/182SRj2Xemo63PCoaLNUsRQ?pwd1111 提取码&#xff1a;1…...

vue3 ajax获取json数组排序举例

使用axios获取接口数据 可以在代码中安装axios包&#xff0c;并写入到package.json文件&#xff1a; npm install axios -S接口调用代码举例如下&#xff1a; const fetchScore async () > {try {const res await axios.get(http://127.0.0.1:8000/score/${userInput.v…...

web安全之信息收集

在信息收集中,最主要是就是收集服务器的配置信息和网站的敏感信息,其中包括域名及子域名信息,目标网站系统,CMS指纹,目标网站真实IP,开放端口等。换句话说,只要是与目标网站相关的信息,我们都应该去尽量搜集。 1.1收集域名信息 知道目标的域名之后,获取域名的注册信…...

报错:java: 无法访问org.springframework.boot.SpringApplication

idea报错内容&#xff1a; java: 无法访问org.springframework.boot.SpringApplication 报错原因&#xff1a; <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>3.4…...

线上+线下≠新零售,6大互通诠释新零售的核心要点-亿发

新零售&#xff0c;这个词汇在近年来频繁出现在我们的视野中&#xff0c;它不仅仅是线上与线下的简单相加&#xff0c;而是一场深刻的商业变革。本文将通过6大互通的核心要点&#xff0c;为您揭示新零售的真正内涵。 1. 商品的互联互通 新零售模式下&#xff0c;商品的互联互…...

GitHub Copilot革命性更新:整合顶尖AI模型,如何重塑开发体验?

在技术快速发展的今天&#xff0c;代码辅助工具已成为提升开发效率的利器。今天&#xff0c;我们带来了一个激动人心的消息——GitHub Copilot宣布引入多模型选择功能&#xff0c;这不仅是技术上的一次飞跃&#xff0c;更是对开发者工作流程的一次革新。 多模型选择&#xff1a…...

AWS账户是否支持区域划分?

在云计算的世界中&#xff0c;亚马逊网络服务&#xff08;AWS&#xff09;凭借其全球化的基础设施和丰富的服务选项受到许多企业和开发者的青睐。一个常见的问题是&#xff1a;AWS账户是否支持区域划分&#xff1f;为了回答这个问题&#xff0c;我们九河云一起深入了解AWS的区域…...

Easy Excel 通过【自定义批注拦截器】实现导出的【批注】功能

目录 Easy Excel 通过 【自定义批注拦截器】实现导出的【批注】功能需求原型&#xff1a;相关数据&#xff1a;要导出的对象字段postman 格式导出对象VO 自定义批注拦截器业务代码&#xff1a; 拦截器代码解释&#xff1a;详细解释&#xff1a;格式优化&#xff1a; Easy Excel…...

整数对最小和(Java Python JS C++ C )

题目描述 给定两个整数数组array1、array2,数组元素按升序排列。 假设从array1、array2中分别取出一个元素可构成一对元素,现在需要取出k对元素, 并对取出的所有元素求和,计算和的最小值。 注意: 两对元素如果对应于array1、array2中的两个下标均相同,则视为同一对元…...

MySQL 启动失败问题分析与解决方案:`mysqld.service failed to run ‘start-pre‘ task`

目录 前言1. 问题背景2. 错误分析2.1 错误信息详解2.2 可能原因 3. 问题排查与解决方案3.1 检查 MySQL 错误日志3.2 验证 MySQL 配置文件3.3 检查文件和目录权限3.4 手动启动 MySQL 服务3.5 修复 systemd 配置文件3.6 验证依赖环境 4. 进一步优化与自动化处理结语 前言 在日常…...

谷歌浏览器Chrome打开百度很慢,其他网页正常的解决办法,试了很多,找到了适合的

最近不知怎么的&#xff0c;Chrome突然间打开百度很慢&#xff0c;甚至打不开。不光我一个人遇到这问题&#xff0c;我同事也遇到这个问题。开发中难免遇到问题&#xff0c;需要百度&#xff0c;现在是百度不了。 作为一名开发人员&#xff0c;习惯了使用Chrome进行开发&#…...

深度学习Pytorch中的模型保存与加载方法

深度学习:Pytorch中的模型保存与加载方法 在 PyTorch 中&#xff0c;模型的保存和加载对于模型的持久化和后续应用至关重要。这里详细介绍了两种主要方法&#xff1a;保存整个模型&#xff08;包括架构和参数&#xff09;和仅保存模型的状态字典。以下内容进一步完善了加载模型…...

小红书矩阵运营:怎么通过多个账号来提升品牌曝光?

在如今的社交媒体环境中&#xff0c;小红书作为一个以分享生活方式、购物心得为主的平台&#xff0c;已经成为品牌营销的热土。尤其是通过“小红书矩阵”&#xff0c;品牌能够精准触达不同的用户群体&#xff0c;提升曝光度和转化率。那么&#xff0c;如何通过多个账号进行矩阵…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

Redis:现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

解读《网络安全法》最新修订,把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...