css:button实现el-radio效果

先看最终效果:

​​​请添加图片描述
请添加图片描述

思路

一、

首先准备好按钮内容:const a = ['one','two','three']
将按钮循环展示出来,并设置一些样式,将按钮背景透明:

<button v-for="(item,index) in a" :key="index">{{ item }}</button>button {width: 100px;height: 40px;border-radius: 20px;border: 1px solid red;background-color: transparent;
}

请添加图片描述

二、

在外面包裹一个div,设置背景颜色,border-radius与按钮一致(按钮边框和背景透明,这样背景是什么颜色/边框,按钮就会是什么颜色/边框):

 <div class="container">  <button v-for="(item,index) in a" :key="index">{{ item }}</button></div>.container {margin:40px;border: 1px solid transparent;display: inline-block;padding: 0;border-radius: 20px;height: 40px;background-color: #ECEFEE;
}
button {width: 100px;height: 40px;border-radius: 20px;border: 1px solid transparent;background-color: transparent;
}

请添加图片描述

三、

最后加上选中效果,因为是单选所以必须保证每次只能选中一个,动态绑定class:

<div class="container">  <button v-for="(item,index) in a" :key="index" :class="radio==item?'yes':''" @click="handleClick(item)">{{ item }}</button>
</div>const radio = ref('one') // 默认选中
const handleClick = (value) =>{radio.value = value
}.container{margin:40px;border: 1px solid transparent;display: inline-block;padding: 0;border-radius: 20px;height: 40px;background-color: #ECEFEE;
}
button{width: 100px;height: 40px;border-radius: 20px;border: 1px solid transparent;background-color: transparent;
}
.yes {background: red;color: white;
}

over!!!🎉🎉🎉

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

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

相关文章

实战之巧用header头

案例&#xff1a; 遇到过三次 一次是更改accept&#xff0c;获取到tomcat的绝对路径&#xff0c;结合其他漏洞获取到shell。 一次是更改accept&#xff0c;越权获取到管理员的MD5加密&#xff0c;最后接管超管权限。 一次是更改accept&#xff0c;结合参数获取到key。 这里以越…

如何选购适合自己的内衣洗衣机?性价比高内衣洗衣机推荐

内衣洗衣机&#xff0c;在几年前或许是个新事物&#xff0c;但近两年却是成为了很普遍的家电产品&#xff0c;由于近几年内衣洗衣机需求量的增加&#xff0c;我们在商场的电子产品区都能见到它&#xff0c;就像普通的家庭洗衣机那样&#xff0c;直接摆在展台上销售&#xff0c;…

VPS是什么?详解亚马逊云科技Amazon Lightsail(VPS)虚拟专用服务器

2006年&#xff0c;南非开普敦&#xff0c;亚马逊推出了WBS&#xff0c;以网络服务的形式向企业提供基础的IT服务。亚马逊云科技的一小步&#xff0c;在无数技术更迭&#xff0c;天才设计师和程序员的努力与基础设施建设的完善之下成为了人类科技进展的一大步。 亚马逊云科技可…

【Spring Boot 源码学习】RedisAutoConfiguration 详解

Spring Boot 源码学习系列 RedisAutoConfiguration 详解 引言往期内容主要内容1. Spring Data Redis2. RedisAutoConfiguration2.1 加载自动配置组件2.2 过滤自动配置组件2.2.1 涉及注解2.2.2 redisTemplate 方法2.2.3 stringRedisTemplate 方法 总结 引言 上篇博文&#xff0…

携手云栖,共望未来

&#x1f4a8;随着信息技术的迅猛发展&#xff0c;云计算已成为推动数字经济发展的重要驱动力之一。在这个领域中&#xff0c;云栖大会无疑是中国乃至全球最重要的盛会之一。云栖大会的历史可以追溯到2009年的地方网站峰会&#xff0c;随着时间的推移&#xff0c;它逐渐演变为阿…

如何在Instagram和kol展开合作

网红营销已经演变成一个由品牌、MCN机构、红人和消费者组成的复杂生态系统&#xff0c;并在某种程度上重新定义了当今社交媒体时代营销和广告的本质。在这个情况下&#xff0c;品牌找红人进行营销推广已经成为大势&#xff0c;而最能体现网红营销发展的莫过于Instagram这个平台…

数据结构(三):栈及面试常考的算法

一、栈介绍 1、定义 栈也是一种数据呈线性排列的数据结构&#xff0c;不过在这种结构中&#xff0c;我们只能访问最新添加的数据。从栈顶放入元素的操作叫入栈&#xff0c;取出元素叫出栈。 2、优缺点及使用场景 优点&#xff1a;高效的操作、简单易用、空间效率高等 缺点&…

【SpringSecurity】快速入门—通俗易懂

目录 1.导入依赖 2.继承WebSecurityConfigurerAdapter 3.实现UserDetailsService 4.记住我 5.用户注销 6.CSRF理解 7.注解功能 7.1Secured 7.2PreAuthorized 7.3PostAuthorized 7.4PostFilter 7.5ZPreFilter 8.原理解析 1.导入依赖 首先&#xff0c;在pom.xml文…

计算机网络-IP地址

文章目录 子网划分定长子网划分子网划分的方法子网掩码 可变长子网划分 无类别编址网络前缀路由聚合 特殊用途的IP地址专用网络地址链路本地地址运营商级NAT共享地址用于文档的测试网络地址 IP地址的规划和分配IP地址的规划和分配方法IP地址的规划和分配实例 子网划分 定长子网…

文章分类管理接口

目录 前言 新建表 获取文章分类列表接口 初始化路由模块 将路由对象导出并使用 初始化路由对象处理函数 修改路由代码 导入数据库 定义sql语句 调用db.query() 完整的获取文章分类列表处理函数 新增文章分类接口 定义路由和处理函数 验证表单数据 查询分类名称与…

UDP网络编程的接受与发送信息

/发送端B>可以接受数据 public class UDPSenderB {public static void main(String[] args) throws IOException {//创建一个DatagramSocket 对象&#xff0c;准备发送和接受数据DatagramSocket socket new DatagramSocket(9998);//将需要发送的数据&#xff0c;封装到Data…

空号检测API如何助力于提高客户关系管理

引言 在现代商业世界中&#xff0c;客户关系管理已经成为企业成功的关键要素之一。CRM不仅涉及到如何吸引新客户&#xff0c;还包括如何维护并与现有客户建立持久而有益的关系。在这个过程中&#xff0c;通信是至关重要的。为了确保您的客户数据库保持最新和准确&#xff0c;空…

navicat15 恢复试用方法

1.运行&#xff0c;输入regedit&#xff0c;打开注册表 2.注册表中搜索 HKEY_CURRENT_USER\Software\PremiumSoft\NavicatPremium&#xff0c;删除下面的Registration15XCS文件夹 3.注册表中再搜索 HKEY_CURRENT_USER\Software\Classes\CLSID 然后拉到文件夹目录的最后&#x…

「永不失联」产品创新与升级系列发布,预约直播“即将发车”

数字化浪潮下&#xff0c;北斗时空智能正成为我国重要的新型基础设施。 通过将卫星定位精度提升至厘米级乃至毫米级&#xff0c;时空智能满足了数字化时代智能驾驶、共享出行、智慧城市等多种智能终端对时空信息的爆发式增长需求&#xff0c;同步印证着测绘地理信息领域的技术应…

什么是Vue.js中的指令(directive)?举例说明一些常见的指令。

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

Azure机器学习 - 使用与Azure集成的Visual Studio Code实战教程

本文介绍如何启动远程连接到 Azure 机器学习计算实例的 Visual Studio Code。 借助 Azure 机器学习资源的强大功能&#xff0c;使用 VS Code 作为集成开发环境 (IDE)。 在VS Code中将计算实例设置为远程 Jupyter Notebook 服务器。 关注TechLead&#xff0c;分享AI全维度知识。…

Spring本地jar包依赖项目改为maven依赖

1.简介 我们在做项目的时候&#xff0c;可能会偶尔接手较为古老的项目&#xff0c;这些项目使用了较为老旧的版本管理或依赖管理方法&#xff0c;对于新开发项目来说&#xff0c;这些老旧的依赖管理方式会影响开发效率&#xff0c;所以&#xff0c;一般我们会选择将老项目的依…

JavaEE入门介绍,HTTP协议介绍,常用状态码及含义,服务器介绍(软件服务器、云服务器)

一、JavaEE入门 JavaEE&#xff08;Java Enterprise Edition&#xff09;&#xff0c;Java企业版&#xff0c;是一个用于企业级web开发&#xff08;不需要使用控制台&#xff09;平台。最早由Sun公司定制并发布&#xff0c;后由Oracle负责维护。 JavaEE平台规范了在开发企业级w…

NB-IOT的粮库挡粮门异动监测装置

一种基于NBIOT的粮库挡粮门异动监测装置,包括若干个NBIOT开门监测装置,物联网后台管理系统,NBIOT低功耗广域网络和用户访问终端;各个NBIOT开门监测装置通过NBIOT低功耗广域网络与物联网后台管理系统连接,物联网后台管理系统与用户访问终端连接.NBIOT开门监测装置能够对粮库挡粮…

HarmonyOS开发:基于http开源一个网络请求库

前言 网络封装的目的&#xff0c;在于简洁&#xff0c;使用起来更加的方便&#xff0c;也易于我们进行相关动作的设置&#xff0c;如果&#xff0c;我们不封装&#xff0c;那么每次请求&#xff0c;就会重复大量的代码逻辑&#xff0c;如下代码&#xff0c;是官方给出的案例&am…