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

vue3之使用图片实现类似于 el-radio 的单选框功能，并且可实现选中和取消选中

news 2026/4/9 21:56:29
背景

我们在工作中常用的一般都是使用类似于 element-plus 中的 el-radio 或者是 el-checkbox 来实现单选或者多选

若有一天我们遇到了一个新的业务需求，需要使用 图片 来实现类似于 el-radio 的功能，并且要求实现第一次点击时处于选中状态，当我们再次点击时处于非选中状态。对于这种效果该如何实现？

下面给出了可实现的两种方案：

实现方案
  1. 第一种就是利用 input元素和img元素，主要利用input元素的checked属性，具体的代码实现可参考我之前写的有关vue2实现：juejin.cn/post/728791…
  2. 第二种就是利用img元素以及数组的有关知识进行，这里着重介绍该种方法

 

实现效果如下：

 大概思路
  • 为了能够实现这个类似于选中和取消选中的效果，这里需要对后台返回的数据加以处理，给每条数据增加一个isChecked: false，以此来初始化其选中与否的状态

封装组件

ImageCheckRadio.vue

<template><div class="image-checked-co

相关文章：

vue3之使用图片实现类似于 el-radio 的单选框功能，并且可实现选中和取消选中

背景 我们在工作中常用的一般都是使用类似于 element-plus 中的 el-radio 或者是 el-checkbox 来实现单选或者多选 若有一天我们遇到了一个新的业务需求，需要使用 图片 来实现类似于 el-radio 的功能，并且要求实现第一次点击时处于选中状态，当我们再次点击时处于非选中状态…...

编程日记 2024/5/26 5:22:50

Vue 安装vue

1、官网安装下载安装nodejs 2、安装完成后&#xff0c;通过命令查看版本,可以查看到版本 node -v npm -v 3、安装Vue CLi npm install -g vue/cli 4、创建项目,vue create test 如果遇到报错&#xff1a; ERROR Error: spawn yarn ENOENT Error: spawn yarn ENOENT at ChildP…...

编程日记 2024/5/26 5:21:49

5月30日在线研讨会 | 面向智能网联汽车的产教融合解决方案

随着智能网联汽车技术的快速发展&#xff0c;产业对高素质技术技能人才的需求日益增长。为了促进智能网联汽车行业的健康发展&#xff0c;推动教育链、人才链与产业链、创新链的深度融合&#xff0c;经纬恒润推出产教融合相关方案&#xff0c;旨在通过促进教育链与产业链的深度…...

编程日记 2024/5/26 5:20:47

嵩山为什么称为三水之源

三水指黄河、淮河、济河&#xff0c;这三条河流环绕在嵩山周边。 黄河横亘在嵩山北部&#xff0c;其支流伊洛河从西南方环绕嵩山&#xff0c;然后汇入黄河。济河&#xff0c;古称济水&#xff0c;源自济源王屋山&#xff0c;自身河道在东晋时代被黄河夺占&#xff0c;从此消失。…...

编程日记 2024/5/26 5:19:46

最新文章合集

GitHub宝藏项目&#xff1a;每天一个&#xff0c;让你的技术库增值不停&#xff01; STORM、SuperMemory、Awesome Chinese LLM、AI写作助手、资料搜集、文章生成、视角问题引导、模拟对话策略、内容导入、浏览器插件、资源库、开源微调模型 开发者必看&#xff1a;Linux终端…...

编程日记 2024/5/26 5:17:44

Jmeter预习第1天

Jmeter参数化&#xff08;重点&#xff09; 本质&#xff1a;使用参数的方式来替代脚本中的固定为测试数据 实现方式&#xff1a; 定义变量&#xff08;最基础&#xff09; 文件定义的方式&#xff08;所有测试数据都是固定的情况下[死数据]&#xff0c;eg:注册登录&#xff0…...

编程日记 2024/5/26 5:16:42

Volatile的内存语义

1、volatile的特性 可见性&#xff1a;对一个volatile变量的读&#xff0c;总能够看到任意一个线程对这个volatile变量的写入。 原子性&#xff1a;对任意单个volatile变量的读/写具有原子性&#xff0c;但类似于volatile这种复合操作不具有原子性。 接下来我们用程序验证。…...

编程日记 2024/5/26 5:15:40

Debezium+Kafka：Oracle 11g 数据实时同步至 DolphinDB 解决方案

随着越来越多用户使用 DolphinDB&#xff0c;各式各样的应用场景对 DolphinDB 的数据接入提出了不同的要求。部分用户需要将 Oracle 11g 的数据实时同步到 DolphinDB 中来&#xff0c;以满足在 DolphinDB 中实时使用数据的需求。本篇教程将介绍使用 Debezium 来实时捕获和发布 …...

编程日记 2024/5/26 5:14:39

前端如何在 WebSocket 的请求头中使用标准 HTTP 头携带 Authorization 信息,添加请求头

WebSocket 的请求头(header)中如何携带 authorization...

编程日记 2024/5/26 5:12:37

Java---图书管理系统(练习版)

1.主函数 import book.Book; import book.BookList; import user.AdminUser; import user.NormalUser; import user.User;import java.util.Scanner;public class Main {public static User Login(){//确认你的身份System.out.println("请输如你的名字");Scanner sc…...

编程日记 2024/5/26 5:11:36

ICML2024 定义新隐私保护升级：DP-BITFIT新型微调技术让AI模型学习更安全

DeepVisionary 每日深度学习前沿科技推送&顶会论文分享&#xff0c;与你一起了解前沿深度学习信息&#xff01; 引言&#xff1a;差分隐私在大模型微调中的重要性和挑战 在当今的深度学习领域&#xff0c;大型预训练模型的微调已成为提高各种任务性能的关键技术。然而&am…...

编程日记 2024/5/26 5:10:35

网络空间安全数学基础·整除与同余

主要内容&#xff1a; 整除的基本概念&#xff08;掌握&#xff09; 素数&#xff08;掌握&#xff09; 同余的概念&#xff08;掌握&#xff09; 1.1整除 定义&#xff1a;设a&#xff0c;b是任意两个整数&#xff0c;其中b≠0&#xff0c;如果存在一个整数q&#xff0c;使 …...

编程日记 2024/5/26 5:09:34

同旺科技 FLUKE ADPT 隔离版发布 ---- 说明书

所需设备&#xff1a; 1、FLUKE ADPT 隔离版 内附链接&#xff1b; 应用于&#xff1a;福禄克Fluke 12E / 15BMax / 17B Max / 101 / 106 / 107 应用于&#xff1a;福禄克Fluke 15B / 17B / 18B...

编程日记 2024/5/26 5:07:32

云计算-角色、特性和模型 (Roles, Characteristics, and Models)

角色、特性和模型 (Roles, Characteristics, and Models) 角色和边界 (Roles and Boundaries) 为了识别云计算模型&#xff0c;我们首先需要了解各种参与者的角色和边界。由于云系统通常遵循面向服务的模型&#xff0c;我们需要了解服务提供者和服务订阅者之间的边界。我们将遵…...

编程日记 2024/5/26 5:06:31

介绍一下Hugging Face,这个公司的背景是什么

Hugging Face是一家成立于2016年的人工智能公司&#xff0c;专注于为AI研究人员和开发者提供开源模型库和工具。以下是关于Hugging Face公司的详细背景介绍&#xff1a; 公司历史与创始人&#xff1a; Hugging Face由Clment Delangue、Julien Chaumond和Thomas Wolf三位法国籍…...

编程日记 2024/5/26 5:03:28

【C++高阶（一）】继承

目录 一、继承的概念 1.继承的基本概念 2.继承的定义和语法 3.继承基类成员访问方式的变化 ​编辑 4.总结 二、基类和派生类对象赋值转换 三、继承中的作用域 四、派生类的默认成员函数 1.派生类中的默认构造函数 2.派生类中的拷贝构造函数 3.派生类中的移动构造函数…...

编程日记 2024/5/26 5:02:27

AI原生嵌入式矢量模型数据库ChromaDB-部署与使用指南

在人工智能大模型领域&#xff0c; 离不开NLP技术&#xff0c;在NLP中词向量是一种基本元素&#xff0c;如何存储这些元素呢&#xff1f; 可以使用向量数据库ChromeDB Chroma Chroma 是 AI 原生开源矢量数据库。Chroma 通过为 LLM 提供知识、事实和技能&#xff0c;使构建 L…...

编程日记 2024/5/26 5:00:26

c# 画一个正弦函数

1.概要 c# 画一个正弦函数 2.代码 using System; using System.Drawing; using System.Windows.Forms;public class SineWaveForm : Form {private const int Width 800;private const int Height 600;private const double Amplitude 100.0;private const double Period…...

编程日记 2024/5/26 4:58:24

Docker学习（3）：镜像使用

当运行容器时&#xff0c;使用的镜像如果在本地中不存在&#xff0c;docker 就会自动从 docker 镜像仓库中下载&#xff0c;默认是从 Docker Hub 公共镜像源下载。 一、列出镜像列表 可以使用 docker images 来列出本地主机上的镜像。 各个选项说明&#xff1a; REPOSITORY&am…...

编程日记 2024/5/26 4:57:22

【Git】版本控制工具——Git介绍及使用

目录 版本控制版本控制系统的主要目标分类小结 分布式版本控制系统——GitGit特点Git与SVN的区别Git的工作机制 Git安装Git 团队协作机制团队内协作跨团队协作远程仓库远程仓库的作用有以下几个方面远程仓库操作流程/团队协作流程 Git分支什么是分支分支的好处 Git的常用命令Gi…...

编程日记 2024/5/26 4:56:20

使用 Python 操作 Excel 文件中的工作表（添加和删除）

在处理复杂的 Excel 文档时&#xff0c;工作表的管理是一项基础而重要的技能。无论是需要为不同部门创建独立的数据表格&#xff0c;还是清理不再需要的旧数据&#xff0c;灵活地添加和删除工作表都能帮助我们更好地组织和管理数据。 本文将介绍如何使用 Python 和 Spire.XLS 库…...

编程新知 2026/4/9 21:45:37

AI_概念篇_MCP

AI_概念篇_MCP让 AI 真正能"动手"的标准协议没有 MCP 之前&#xff1a;重复造轮子的时代 早期 Agent&#xff08;2023 年前后的 AutoGPT、早期 GitHub Copilot 等&#xff09;要调用外部工具&#xff0c;每个平台都得自己硬编码实现一遍&#xff1a; Cursor 自…...

编程新知 2026/4/9 21:27:27

你还在用curl_multi？PHP原生异步HTTP客户端已上线（ext/http v4.0深度解析，仅限PHP 8.3+ LTS用户抢先体验）

第一章&#xff1a;PHP异步I/O的演进与时代意义在Web应用从单机LAMP架构迈向高并发微服务时代的进程中&#xff0c;PHP长期被贴上“同步阻塞”的标签。然而自PHP 7.0起&#xff0c;通过扩展支持、语言特性演进与生态工具迭代&#xff0c;PHP已逐步构建起完整的异步I/O能力栈——…...

编程新知 2026/4/9 21:11:18

django基于Spark的南昌房价数据分析系统的设计与实现_45i0b357_c018

前言   系统旨在通过采集和分析南昌地区的房价数据&#xff0c;包括二手房信息、房价走势、区域均价等&#xff0c;为房地产开发商、投资者、购房者以及政府相关部门提供全面、准确、实时的房价信息&#xff0c;辅助其制定更精准的营销策略、投资决策和政策制定。 一、项目介…...

编程新知 2026/4/9 21:01:16

AMA-SAM：用于高保真组织学细胞核分割的对抗性多域对齐万物分割模型/文献速递-多模态医学影像最新进展

2026.4.8本文提出了AMA-SAM框架&#xff0c;通过引入条件梯度反转层&#xff08;CGRL&#xff09;实现鲁棒的多域对齐&#xff0c;并设计高分辨率解码器&#xff08;HR-Decoder&#xff09;以保留精细细节&#xff0c;从而增强了万物分割模型&#xff08;SAM&#xff09;在高分…...

编程新知 2026/4/9 20:21:43

最佳实践：避免在react-native-unistyles中常见的10个错误

最佳实践&#xff1a;避免在react-native-unistyles中常见的10个错误 【免费下载链接】react-native-unistyles Level up your React Native StyleSheet 项目地址: https://gitcode.com/gh_mirrors/re/react-native-unistyles react-native-unistyles是提升React Native…...

编程新知 2026/4/9 19:24:49

012.整体框架适配SDRAM|千篇笔记实现嵌入式全栈/裸机篇

⚠️裸机仓库&#xff1a;https://gitee.com/simonchina_carel_li/mini2440-bare-metal.git ⚠️Tag: 11-sdram-apply 1. 这次要做什么&#xff1f; 我们已经完成了sdram的初始化&#xff0c;现在sdram已经可以使用了 我们之前的固件&#xff0c;栈空间是跑在SOC内置的4KB的S…...

编程新知 2026/4/9 18:42:35

Revit 2026从零到一：一站式下载、安装、激活与授权实战指南（附资源包）【2025版】

1. Revit 2026软件下载全攻略 第一次接触Revit的朋友们&#xff0c;下载软件这一步就可能让你们头疼。我见过太多人因为下载了不完整的安装包&#xff0c;导致后续安装频频报错。今天我就手把手带大家找到官方正版的Revit 2026安装资源。 目前获取Revit安装包主要有三个靠谱途径…...

编程新知 2026/4/9 18:04:18

SiameseUIE效果实测：中文OCR后文本（含错别字）仍保持82%+抽取准确率

SiameseUIE效果实测&#xff1a;中文OCR后文本&#xff08;含错别字&#xff09;仍保持82%抽取准确率 1. 引言&#xff1a;当AI遇到不完美的中文文本 你有没有遇到过这样的情况&#xff1a;从扫描文档或图片中提取的中文文字&#xff0c;总是带着各种错别字和格式问题&#x…...

编程新知 2026/4/9 15:05:17

3个强力方案：FanControl风扇控制中文设置完全指南

3个强力方案&#xff1a;FanControl风扇控制中文设置完全指南 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending/fa/Fan…...

编程新知 2026/4/9 14:02:19