Vue通过ref修改 <el-input-number> 增减按钮的样式

Vue 为一个 <el-input-number> 设置了ref为‘inputNumberRef’, 通过这个ref获取<el-input-number>组件中的增、减按钮所在的<i>标签,并将它们的class分别改为'el-icon-plus' 和 'el-icon-minus'。

可以通过以下代码实现:

<template><div><el-input-number ref="inputNumberRef"></el-input-number></div>
</template><script>
export default {mounted() {const inputNumberElement = this.$refs.inputNumberRef.$el;const plusButton = inputNumberElement.querySelector('.el-icon-arrow-up');plusButton.classList.replace('el-icon-arrow-up', 'el-icon-plus');const minusButton = inputNumberElement.querySelector('.el-icon-arrow-down');minusButton.classList.replace('el-icon-arrow-down', 'el-icon-minus');}
}
</script>

mounted() 钩子函数里面,首先获取 &lt;el-input-number> 组件实例的根元素 this.$refs.inputNumberRef.$el,接着分别获取增加和减少按钮的元素,即 .el-icon-arrow-up 和 .el-icon-arrow-down,最后使用 classList.replace() 方法将它们的类名从 el-icon-arrow-upel-icon-arrow-down 替换为 el-icon-plusel-icon-minus

修改后的样式:

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

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

相关文章

如何实现CSDN评论区粉丝幸运抽选功能:一场代码与运气的碰撞

文章目录 前言抽选规则实现思路代码实现1.获取评论数据2.过滤符合抽选规则的评论者3.获取粉丝数据4.过滤符合抽选规则的粉丝5.增加公众号留言权重6.抽选粉丝 完整的代码效果展示结语 前言 为了回馈粉丝们一直以来的的关注和支持&#xff0c;我近期开启了赠书活动&#xff0c;活…

【网络编程·数据链路层】MAC帧/以太网协议/ARP协议/RARP协议

需要云服务器等云产品来学习Linux的同学可以移步/-->腾讯云<--/-->阿里云<--/-->华为云<--/官网&#xff0c;轻量型云服务器低至112元/年&#xff0c;新用户首次下单享超低折扣。 目录 一、MAC帧 1、IP地址和MAC地址的区别 2、MAC帧协议 3、MTU对IP协议的…

腾讯云2核4G服务器5M带宽 218元一年 优惠价格明细表

腾讯云2核4G服务器5M带宽可以选择轻量应用服务器或云服务器ECS&#xff0c;轻量2核4G5M带宽服务器218元一年&#xff1a; 腾讯云2核4G服务器5M带宽收费 腾讯云2核4G服务器可以选择轻量应用服务器或者ECS云服务器&#xff0c;云服务器ECS是专业级云服务器&#xff0c;大多数使用…

【K8S系列】深入解析k8s网络插件—Canal

序言 做一件事并不难&#xff0c;难的是在于坚持。坚持一下也不难&#xff0c;难的是坚持到底。 文章标记颜色说明&#xff1a; 黄色&#xff1a;重要标题红色&#xff1a;用来标记结论绿色&#xff1a;用来标记论点蓝色&#xff1a;用来标记论点 在现代容器化应用程序的世界中…

docker-compose安装redis

基于docker-compose快速安装redis 目录 一、目录结构 1、docker-compose.yml 2、redis.conf 二、连接使用 一、目录结构 1、docker-compose.yml version: 3 services:redis:image: registry.cn-hangzhou.aliyuncs.com/zhengqing/redis:6.0.8 # 镜像red…

【性能测试】Jmeter —— jmeter计数器

jmeter计数器 如果需要引用的数据量较大&#xff0c;且要求不能重复或者需要递增&#xff0c;那么可以使用计数器来实现 如&#xff1a;新增功能&#xff0c;要求名称不能重复 1&#xff0c;新增计数器 计数器&#xff1a;允许用户创建一个在线程组之内都可以被引用的计数器…

van-list 下拉刷新 触底分页 触底分页事件只加载一次

我是 头部是筛选的条件&#xff0c;&#xff0c;更换不同的状态&#xff0c;显示不同的列表数据&#xff0c;比如 审批中数据是 对的&#xff0c;触底分页也是对的&#xff0c;如果我切换一个状态的话&#xff0c;总共是 15条数据&#xff0c;但是 切换了状态只显示第一页的数据…

8个免费的AI和LLM游乐场

推荐&#xff1a;使用 NSDT场景编辑器 快速搭建3D应用场景 在本文中&#xff0c;我们的目标是通过引入八个用户友好的平台来弥合这一差距&#xff0c;这些平台使任何人都可以免费测试和比较开源AI模型。此外&#xff0c;它们还提供多种更新型号&#xff0c;确保您及时了解最新进…

无涯教程-JavaScript - SLN函数

描述 SLN函数返回资产在一个期间内的直线折旧。 语法 SLN (cost, salvage, life)争论 Argument描述Required/OptionalCostThe initial cost of the asset.RequiredSalvage The value at the end of the depreciation (sometimes called the salvage value of the asset).Re…

win11本地连接没了怎么办

很多用户在使用win11系统时发现自己的网络连接没有了&#xff0c;遇到这种情况的话&#xff0c;我们应该怎么处理呢&#xff1f;我们可以尝试打开网络图标&#xff0c;下面就是小编整理出的教程&#xff0c;大家一起看看吧。 win11本地连接没了怎么办 方法一&#xff1a; 1、…

数据分享|R语言武汉流动人口趋势预测:灰色模型GM(1,1)、ARIMA时间序列、logistic逻辑回归模型...

全文链接&#xff1a;http://tecdat.cn/?p32496 人口流动与迁移&#xff0c;作为人类产生以来就存在的一种社会现象&#xff0c;伴随着人类文明的不断进步从未间断&#xff08;点击文末“阅读原文”获取完整代码数据&#xff09;。 相关视频 人力资源是社会文明进步、人民富裕…

Redis I/O多路复用机制

一、基础回顾 1.1 多路复用要解决什么问题 并发多客户端连接场景&#xff0c;在多路复用之前最简单和典型的方案就是同步阻塞网络IO模型。 这种模式的特点就是用一个进程来处理一个网络连接(一个用户请求),比如一段典型的示例代码如下。 直接调用 recv 函数从一个 socket 上…

去除pdf/word的水印艺术字

对于pdf中的水印如果无法去除水印&#xff0c;则先另存为word&#xff0c;然后再按下面办法处理即可&#xff1a; 查看宏&#xff0c;创建&#xff1a;删除艺术字 添加内容&#xff1a; Sub 删除艺术字()Dim sh As ShapeFor Each sh In ActiveDocument.ShapesIf sh.Type msoT…

HTML的段落中怎么样显示出标签要使用的尖括号<>?

很简单&#xff1a; 符号 < 用 < 替代&#xff1b; 符号 > 用 > 替代。 示例代码如下&#xff1a; <!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>HTML中怎样打出尖括号</title> </head> <b…

Android Aidl跨进程通讯(三)--进阶使用

学更好的别人&#xff0c; 做更好的自己。 ——《微卡智享》 本文长度为2478字&#xff0c;预计阅读6分钟 前言 Android的AIDL使用和异常报错都已经介绍过了&#xff0c;今天这篇还是在原来的Demo基础上加入几个AIDL的进阶使用方法。 】 AIDL进阶使用 微卡智享 in,out,inout的使…

2022年全国研究生数学建模竞赛华为杯A题移动场景超分辨定位问题求解全过程文档及程序

2022年全国研究生数学建模竞赛华为杯 A题 移动场景超分辨定位问题 原题再现&#xff1a; 在日常家庭生活中&#xff0c;人们可能需要花费大量时间去寻找随意摆放在家中某些角落里的小物品。但如果给某些重要物品贴上电路标签&#xff0c;再利用诸如扫地机器人的全屋覆盖能力&…

docker入门

弱小和无知不是生存的障碍&#xff0c;傲慢才是。 Docker 学习 Docker概述 Docker为什么出现&#xff1f; 一款产品&#xff1a; 开发–上线 两套环境&#xff01;应用环境&#xff0c;应用配置&#xff01; 开发 — 运维。 问题&#xff1a;我在我的电脑上可以允许&#…

Vuex -访问(modules)模块中的 state mutations actions getters

文章目录 四大核心复习一、获取模块内的state数据1.目标&#xff1a;2.使用模块中的数据3.代码示例 二、获取模块内的getters数据1.目标&#xff1a;2.语法&#xff1a;3.代码演示 三、获取模块内的mutations方法1.目标&#xff1a;2.注意&#xff1a;3.调用方式&#xff1a;4.…

【实例项目:基于多设计模式下的日志系统(同步异步)】

本项目涉及的到所有源码见以下链接&#xff1a; https://gitee.com/ace-zhe/wz_log 一、项目简介 1.日志的概念&#xff08;白话版&#xff09; 日志类似于日记&#xff0c;通常是指对完成某件事情的过程中状态等的记录&#xff0c;而计算机中的日志是指日志数据&#xff0c…

考研英语笔记:程序员是否勤奋就看他的英语好不好

一位大佬朋友圈写道&#xff1a;看程序员是否勤奋就看他的英语好不好&#xff0c;智商高不高就看他算法好不好。 这句话我当时看到了很触动&#xff0c;默默的记在了心底。 对我来说&#xff0c;算法就免了&#xff0c;但学英语我一直在坚持。我不敢说我是优秀的程序员&#xf…