el-input组件当数据为空时, 边框变红,并提示错误信息

1,样式

初始:
在这里插入图片描述
当不输入口令, 点击确定时:

在这里插入图片描述

2, 思路

主要是使用动态类的方式。
先设置输入框变红的样式以及提示文字的样式class
对于样式class 用变量来控制是否奏效。

3, 代码实现

//html:
<div class="input"><el-inputv-model="password"ref="passwordRef"placeholder="请输入操作口令"type="password"size="small":class="{'password' : errorVerify}"></el-input><span class="error" :style="{'display': errorVerify ? 'inline' : 'none'}">请输入操作口令</span></div><span slot="footer" class="dialog-footer"><el-button @click="handleClose">取 消</el-button><el-button type="primary" @click="confirm">确 定</el-button></span>// js:confirm(){if(!this.password) {this.errorVerify = truereturn}this.errorVerify = false}// css:.password /deep/ input {border-color: #f56c6c; 
}}
.error {color: red;font-size: 10px;padding-left: 5px;
}   

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

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

相关文章

【leetcode】 剑指 Offer学习计划(java版本含注释)(下)

目录 前言第十六天&#xff08;排序&#xff09;剑指 Offer 45. 把数组排成最小的数&#xff08;中等&#xff09;剑指 Offer 61. 扑克牌中的顺子&#xff08;简单&#xff09; 第十七天&#xff08;排序&#xff09;剑指 Offer 40. 最小的k个数&#xff08;简单&#xff09; 第…

NCDA设计大赛获奖作品剖析:UI设计如何脱颖而出?

第十二届大赛简介 - 未来设计师全国高校数字艺术设计大赛&#xff08;NCDA&#xff09;开始啦&#xff01;视觉传达设计命题之一: ui 设计&#xff0c;你想知道的都在这里。为了让大家更好的参加这次比赛&#xff0c;本文特别为大家整理了以往NCDA大赛 UI 设计的优秀获奖作品&a…

QoS简单配置案例

1、两边两个方向做相同的配置&#xff1a;入口复杂流分类用mqc方式配置&#xff0c;ds内设备入口配简单流分类。 2、两边两个方法做拥塞管理配置&#xff0c;拥塞管理配置思路&#xff1a; 拥塞管理的两种配置方法&#xff08;全部用一种也可以&#xff0c;这里学习就用了两种…

算法修炼-动态规划之路径问题(1)

62. 不同路径 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a;选定一个网格为终点&#xff0c;走到这个网格的所有走法就是这个网格的上面一个网格的所有走法加上这个网格左边一个网格的所有走法&#xff0c;然后做好初始化工作就行。 class Solution { public:int…

Linux线程池

前言 线程池是一种管理线程的机制&#xff0c;它可以在需要时自动创建和销毁线程&#xff0c;以及分配和回收线程资源。线程池的主要优点是减少了频繁创建和销毁线程所带来的开销&#xff0c;提高了系统的稳定性和可扩展性。此外&#xff0c;线程池还可以有效地控制线程的数量&…

贝叶斯优化CNN分类(matlab代码)

贝叶斯优化CNN分类matlab代码 数据为Excel分类数据集数据。 数据集划分为训练集、验证集、测试集&#xff0c;比例为8:1:1 数据处理: 在数据加载后&#xff0c;对数据进行了划分&#xff0c;包括训练集、验证集和测试集&#xff0c;这有助于评估模型的泛化能力。 数据标准化…

美梦从舒适开始,康姿百德床垫为睡眠健康护航

在当今社会&#xff0c;高质量的睡眠已成为人们对生活品质的追求&#xff0c;对床垫的选择也变得越来越讲究。在我们繁忙的生活中&#xff0c;一张优质的床垫不仅是我们舒适休息的保障&#xff0c;更是保持健康生活方式的重要部分。康姿百德床垫&#xff0c;作为市场上的佼佼者…

gpt批量原创文章生成器,不限制内容的生成器

在当今的数字化时代&#xff0c;内容创作是网站持续发展的重要组成部分。然而&#xff0c;对于拥有大量内容需求的网站来说&#xff0c;手动创作文章可能会耗费大量时间和精力。为了解决这一问题&#xff0c;许多GPT&#xff08;生成式预训练模型&#xff09;文章生成软件应运而…

瑞_Redis_Redis命令

文章目录 1 Redis命令Redis数据结构Redis 的 key 的层级结构1.0 Redis通用命令1.0.1 KEYS1.0.2 DEL1.0.3 EXISTS1.0.4 EXPIRE1.0.5 TTL 1.1 String类型1.1.0 String类型的常见命令1.1.1 SET 和 GET1.1.2 MSET 和 MGET1.1.3 INCR和INCRBY和DECY1.1.4 SETNX1.1.5 SETEX 1.2 Hash类…

python封装,继承,复写详解

目录 1.封装 2.继承 复写和使用父类成员 1.封装 class phone:__voltage 0.5def __keepsinglecore(self):print("单核运行")def callby5g(self):if self.__voltage > 1:print("5g通话开启")else:self.__keepsinglecore()print("不能开启5g通…

‘grafana.ini‘ is read only ‘defaults.ini‘ is read only

docker安装grafana 关闭匿名登录情况下的免密登录遇到问题 grafana.ini is read only defaults.ini is read only 参考回答&#xff08;Grafana.ini giving me the creeps - #2 by bartweemaels - Configuration - Grafana Labs Community Forums&#xff09; 正确启动脚本 …

mac苹果电脑c盘满了如何清理内存?2024最新操作教程分享

苹果电脑用户经常会遇到麻烦:内置存储器(即C盘)空间不断缩小&#xff0c;电脑运行缓慢。在这种情况下&#xff0c;苹果电脑c盘满了怎么清理&#xff1f;如何有效清理和优化存储空间&#xff0c;提高计算机性能&#xff1f;成了一个重要的问题。今天&#xff0c;我想给大家详细介…

鸿蒙岗位需求突增!移动端、PC端、IoT到底该怎么选?

“2024年是原生鸿蒙的关键一年&#xff0c;我们要加快推进各类鸿蒙原生应用的开发&#xff0c;集中打赢技术底座和三方生态两大最艰巨的战斗。”这是余承东在新年信中表达的决心。 随后在1月18日举行的鸿蒙生态千帆启航仪式上&#xff0c;华为宣布 HarmonyOS NEXT 鸿蒙星河版系…

aop监控spring cloud接口超时,并记录到数据库

引入pom <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0…

【论文精读】StableSR

摘要 将Diffusion先验嵌入到合成模型&#xff08;如Stable Diffusion&#xff09;的模式在图像视频编辑领域取得了良好的结果。本文提出StableSR&#xff0c;将Diffusion先验嵌入到超分辨率&#xff08;SR&#xff09;&#xff0c;且不对图像退化模式做明确假设。具体有&#x…

编译链接实战(25)ThreadSanitizer检测线程安全

ThreadSanitizer&#xff08;又称为TSan&#xff09;是一个用于C/C的数据竞争检测器。在并发系统中&#xff0c;数据竞争是最常见且最难调试的错误类型之一。当两个线程并发访问同一个变量&#xff0c;并且至少有一个访问是写操作时&#xff0c;就会发生数据竞争。C11标准正式将…

JAVA面向对象高级部分—多态

面向对象高级部分—多态 认识多态 对象多态&#xff0c;对象既可以指向老师对象&#xff0c;也可以指向学生对象。 注意事项&#xff1a; 成员变量不谈多态&#xff0c;编译看左边&#xff0c;运行看左边 成员变量编译的是父类People&#xff0c;所以编译的是左边的People&a…

Javaweb之SpringBootWeb案例之自动配置的原理分析的详细解析

3.2.3 原理分析 3.2.3.1 源码跟踪 前面我们讲解了在项目当中引入第三方依赖之后&#xff0c;如何加载第三方依赖中定义好的bean对象以及配置类&#xff0c;从而完成自动配置操作。那下面我们通过源码跟踪的形式来剖析下SpringBoot底层到底是如何完成自动配置的。 源码跟踪技巧…

【README 小技巧】 展示gitee中开源项目start

【README 小技巧】 展示gitee中开源项目start <a target"_blank" hrefhttps://gitee.com/wujiawei1207537021/wu-framework-parent><img srchttps://gitee.com/wujiawei1207537021/wu-framework-parent/badge/star.svg altGitee star/></a>

在VMware中安装CentOS 7并配置Docker

VMware安装CentOS 7 一、介绍 该文章介绍如何使用启动U盘在虚拟机里面安装系统&#xff0c;虚拟机版本为VMware Workstation 16 pro&#xff0c;Linux版本为CentOS Linux release 7.9.2009 (Core)。 二、安装 1、创建虚拟机 点击创建新的虚拟机 选择典型就可以了&#xf…