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

1,样式

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

在这里插入图片描述

2, 思路

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

3, 代码实现

//html:
<div class="input">
            <el-input
              v-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 = true
        return
      }
      this.errorVerify = false
    }
    // css:
    .password /deep/ input {
  border-color: #f56c6c; 
}
   }
.error {
  color: red;
  font-size: 10px;
  padding-left: 5px;
}   

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据结构-----反射

文章目录 反射1.定义2 用途(了解)3 反射基本信息4 反射相关的类&#xff08;重要&#xff09;4.1 Class类(反射机制的起源 )4.1.1 Class类中的相关方法(方法的使用方法在后边的示例当中) 4.2 反射示例4.2.1 获得Class对象的三种方式4.2.2 反射的使用 5、反射优点和缺点6 重点总…

七、基于FreeRTOSSTM32移植MQTT

1、移植环境 (1)Keil MDK: V5.38.0.0 (2)STM32CubeMX: V6.8.1 (3)MCU: STM32F407ZGT6 (4)已移植好FreeRTOS和调试好串口的项目。 FreeRTOS移植参考博客&#xff1a;示例1&#xff1a;FreeRTOS移植详解_基于HAL库工程_hal库移植rtos-CSDN博客mqttclient源码&#xff1a;htt…

如何自学python

Python是一种高级编程语言,它具有简单易学、可读性强、可移植性好、功能丰富等优点,因此在许多领域都被广泛使用,如科学计算、数据分析、人工智能、Web开发、游戏开发等等。 Python具有丰富的标准库和第三方库,可以帮助程序员快速开发功能强大的应用程序。同时,Python也具…

免费下载全网视频系列:一键下载央视视频

之前分享过全网视频下载工具下载视频不求人&#xff0c;免费下载全网视频&#xff0c;今天再分享几个下载央视视频的工具。 第一个是央视频4k下载器&#xff0c;比如下载这个视频https://www.yangshipin.cn/#/video/home?vidv0000313oqb&#xff0c;打开工具在命令行输入 v00…

Vue.js+SpringBoot开发在线课程教学系统

目录 一、摘要1.1 系统介绍1.2 项目录屏 二、研究内容2.1 课程类型管理模块2.2 课程管理模块2.3 课时管理模块2.4 课程交互模块2.5 系统基础模块 三、系统设计3.1 用例设计3.2 数据库设计 四、系统展示4.1 管理后台4.2 用户网页 五、样例代码5.1 新增课程类型5.2 网站登录5.3 课…

[技巧]Arcgis之图斑四至范围批量计算

ArcGIS图层&#xff08;点、线、面三类图形&#xff09;四至范围计算 例外一篇介绍&#xff1a;[技巧]Arcgis之图斑四至点批量计算 说明&#xff1a;如下图画出来的框&#xff08;范围标记不是很准&#xff09; &#xff0c;图斑的x最大和x最小&#xff0c;y最大&#xff0c;…

社区店经营实战策略:如何打造火爆生意并持续盈利?

在竞争激烈的商业环境中&#xff0c;经营一家成功的社区店需要一套全面而有效的策略。作为一名开鲜奶吧5年的创业者&#xff0c;我将分享一些关键的经营策略&#xff0c;帮助你打造火爆生意并实现持续盈利。 1、 市场调研&#xff1a; 在开店之前&#xff0c;深入了解你所在社…

内存占用构造方法

#使用虚拟内存构造内存消耗 mkdir /tmp/memory mount -t tmpfs -o size5G tmpfs /tmp/memory dd if/dev/zero of/tmp/memory/block #释放消耗的虚拟内存 rm -rf /tmp/memory/block umount /tmp/memory rmdir /tmp/memory #内存占用可直接在/dev/shm目录下写文件

#WEB前端(表单)

1.实验&#xff1a; form、input、label 登录界面&#xff0c;表单填写界面 2.IDE&#xff1a;VSCODE 3.记录&#xff1a; 4.代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name&q…

【Linux】基本指令(中)

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:Linux ⚙️操作环境:Xshell (操作系统:CentOS 7.9 64位) man指令 语法:man [选项] 命令 功能:Linux的命令有很多参数&#xff0c;我们无法全部记忆的话&#xff0c;就可以通过man指令查看联机手册获取帮助。…

递归与回溯2

一&#xff1a;递归分治 什么是递归&#xff1f; 函数自己调用自己通过函数体来进行循环以自相似的方法重复进行的过程 递归的过程&#xff1a;先自顶向下找到递归出口&#xff0c;在自底向上回到最初的递归位置 推导路径未知的题目只能用递归不能用循环 比如求多叉树的节点&…

SpringBoot+Jwt+Redis

大致流程&#xff1a; 参照&#xff1a; 史上最全面的基于JWT token登陆验证_完整的基于jwt的登陆认证-CSDN博客 springboot整合JWTRedis_springboot jwt redis-CSDN博客

【QT+QGIS跨平台编译】之六十二:【QGIS_CORE跨平台编译】—【错误处理:未定义类型QgsPolymorphicRelation】

文章目录 一、未定义类型QgsPolymorphicRelation二、解决办法一、未定义类型QgsPolymorphicRelation 报错信息: 错误原因为,使用了未定义类型 QgsPolymorphicRelation 二、解决办法 QgsRelation.h文件中 ①注释第36行: //class QgsPolymorphicRelation;②注释第414行: …

构建大语言模型的四个主要阶段

大规模语言模型的发展历程虽然只有短短不到五年的时间&#xff0c;但是发展速度相当惊人&#xff0c;国内外有超过百种大模型相继发布。中国人民大学赵鑫教授团队在文献按照时间线给出 2019 年至 2023 年比较有影响力并且模型参数量超过 100 亿的大规模语言模型。大规模语言模型…

BUGKU 本地管理员

打开环境&#xff0c;先F12查看看到一串代码。Base64解码一下&#xff0c;得到的应该是密码&#xff0c;然后输入admin | test123试一下 使用BP抓包&#xff0c;修改XFF&#xff0c;得到flag

Vue开发实例(六)实现左侧菜单导航

左侧菜单导航 一、一级菜单二、二级菜单三、三级菜单1、加入相关事件 四、菜单点击跳转1. 创建新页面2. 配置路由3. 菜单中加入路由配置4、处理默认的Main窗口为空的情况 五、动态左侧菜单导航1、动态实现一级菜单2、动态实现二级菜单 一、一级菜单 在之前的Aside.vue中去实现…

php儿童服装销售管理系统计算机毕业设计项目包运行调试

php mysql儿童服装销售网 功能&#xff1a;前台后台 前台&#xff1a; 1.服装资讯 文章标题列表 详情 2.服装选购中心 分页查看图文列表 详情 3.用户注册 登陆 退出 4.服装加入收藏 5.加入购物车 6.对服装进行评论 会员中心&#xff1a; 1.我的账户 查看 修改 2.我的收藏 查看 …

文献阅读笔记《Spatial-temporal Forecasting for Regions without Observations》13页

目录 发行刊物 ABSTRACT 1 INTRODUCTION 2 RELATED WORK&#xff08;相关工作 2.1 Spatial-temporal Forecasting&#xff08;时空预测 2.2 Spatial-temporal Forecasting withIncomplete Data&#xff08;不完全数据的时空预测 2.3 Graph Contrastive Learning&#xf…

Vue2:路由的两种模式history模式和hash模式

一、情景说明 之前我们写的项目启动后&#xff0c;浏览器访问时&#xff0c;路径中会有个#/&#xff0c;会导致不够美观 因为一般的访问地址都是http://123.123.123.123/aaa/bbb这种形式 这一篇&#xff0c;就来解决这个问题 二、案例 1、hash模式 特点&#xff1a;#/后的…

【JavaEE进阶】 代理模式

文章目录 &#x1f343;前言&#x1f38b;什么叫代理模式&#x1f334;静态代理&#x1f38d;动态代理&#x1f6a9;JDK动态代理&#x1f6a9;CGLIB动态代理 ⭕总结 &#x1f343;前言 前面对Spring AOP的详细使用进行了介绍&#xff0c;这篇博客博主将详细讲解一下Spring AOP…