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

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

news 2026/5/27 23:30:58
背景

我们在工作中常用的一般都是使用类似于 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

如何用deberta-v3-base-zeroshot-v2.0构建企业级NLP应用？完整教程来了

如何用deberta-v3-base-zeroshot-v2.0构建企业级NLP应用&#xff1f;完整教程来了 【免费下载链接】deberta-v3-base-zeroshot-v2.0 项目地址: https://ai.gitcode.com/hf_mirrors/NingBo_Ascend/deberta-v3-base-zeroshot-v2.0 deberta-v3-base-zeroshot-v2.0是一款基…...

编程新知 2026/5/26 4:42:23

毕业设计 yolov11骨折检测医疗辅助系统（源码+论文）

文章目录 0 前言1 项目运行效果2 课题背景2.1 研究背景2.2 国内外研究现状2.3 研究意义 3 设计框架&#xff08;骨折检测系统设计框架说明&#xff09;3.1. 系统架构图3.2. 技术选型3.2.1 核心组件3.2.2 辅助工具 3.3. 核心模块设计3.3.1 YOLO模型训练模块训练流程图关键伪代码…...

编程新知 2026/5/26 0:03:57

为什么92%的团队用DeepSeek生成方案仍需人工重写？揭秘缺失的2个元认知层与1套校验协议

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;为什么92%的团队用DeepSeek生成方案仍需人工重写&#xff1f;揭秘缺失的2个元认知层与1套校验协议 当团队将DeepSeek-R1或DeepSeek-VL模型用于技术方案生成时&#xff0c;表面看响应迅速、逻辑连贯&…...

编程新知 2026/5/25 23:45:44

AI学习 - 大模型基础入门

AI学习 - 大模型基础入门 从零开始&#xff1a;Ollama 安装 → 本地模型运行 → Python 代码接入 → 理解核心概念 摘要 本文记录了在 Windows 上使用 Ollama 部署本地大模型、并通过 Python 代码接入调用的完整过程。内容涵盖&#xff1a;Ollama 安装与模型拉取、大模型基础概…...

编程新知 2026/5/25 23:29:27

WebSocket实时通信架构进阶：Room、命名空间与集群部署

WebSocket实时通信架构进阶：Room、命名空间与集群部署 作者：Crown_22 | AI Agent & Hermes Agent 桌面程序开发者 前言 WebSocket已经成为实时应用的标准技术，但大多数教程只停留在"建立连接、发送消息"的基础阶段。在生产环境中，你需要处理Room管理、命名空…...

编程新知 2026/5/25 22:46:38

OmenSuperHub：基于WMI BIOS控制的高性能笔记本硬件管理方案

OmenSuperHub&#xff1a;基于WMI BIOS控制的高性能笔记本硬件管理方案 【免费下载链接】OmenSuperHub Control Omen laptop performance, fan speeds, and keyboard lighting, and unlock power limits. 项目地址: https://gitcode.com/gh_mirrors/om/OmenSuperHub 在惠…...

编程新知 2026/5/25 20:59:15

NanaZip：现代Windows文件压缩问题的终极解决方案

NanaZip&#xff1a;现代Windows文件压缩问题的终极解决方案 【免费下载链接】NanaZip The 7-Zip derivative intended for the modern Windows experience 项目地址: https://gitcode.com/gh_mirrors/na/NanaZip 还在为Windows文件压缩工具界面老旧、功能单一而烦恼吗&…...

编程新知 2026/5/25 20:22:05

构建智能音乐档案：SoundCloud Downloader 的技术架构与实现哲学

构建智能音乐档案&#xff1a;SoundCloud Downloader 的技术架构与实现哲学 【免费下载链接】scdl Soundcloud Music Downloader 项目地址: https://gitcode.com/gh_mirrors/sc/scdl 在流媒体音乐主导的时代&#xff0c;音乐爱好者面临着一种矛盾&#xff1a;我们享受着…...

编程新知 2026/5/25 18:10:23

Claude Code用户告别封号与Token焦虑，无缝切换至Taotoken平台

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Claude Code用户告别封号与Token焦虑&#xff0c;无缝切换至Taotoken平台 对于依赖Claude Code进行编程辅助的开发者而言&#xff…...

编程新知 2026/5/25 17:32:27

Linux 负载均衡的 cache_nice_tries：缓存友好的迁移尝试

简介现如今服务器、嵌入式设备、工控主板普遍采用多核、NUMA 架构 CPU&#xff0c;多进程多线程并发运行模式成为常态。Linux 内核依靠调度域分层负载均衡机制&#xff0c;分散 CPU 运行压力&#xff0c;避免单核心负载过高、其余核心空闲浪费硬件算力。但任务跨核心迁移是一把…...

编程新知 2026/5/27 0:25:42