Element-ui自定义input框非空校验

1、vue自定义非空指令:

main.js中自定义非空指令
当input框或下拉框中数据更新时,触发校验

Vue.directive('isEmpty',{update:function(el,binding,vnode){if(vnode.componentInstance.value==""){el.classList.add("is-required");}else if(vnode.componentInstance.value||vnode.componentInstance.value==0){el.classList.remove("is-required");}}
})

2、css 全局添加必填样式:

.is-required input{border-color:red!important
}

3、具体应用:

<el-select placeholder="请选择" v-isEmpty v-model="form.name"></el-select><el-input v-isEmpty v-model="form.age" />

4、寄语:

过去这一年,你最大的收获是什么呢?
不一定要“战绩赫赫”,
不一定要“大有所成”,
捞出属于你的“星星”即可!
拥有那些“不负生活”的闪亮时刻即可!

在这里插入图片描述

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

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

相关文章

springboot实现ChatGPT式调用(一次调用,持续返回)

下边实现了一个持续返回100以内随机数的接口&#xff0c;在接口超时之前会每隔1秒返回一个随机数 GetMapping(value "/getRandomNum", produces MediaType.TEXT_EVENT_STREAM_VALUE) public SseEmitter getRandomNum() {SseEmitter emitter new SseEmitter();Th…

微服务-OpenFeign-工程案例

Ribbon 前置知识 是NetFlix的开源项目&#xff0c;主要来提供关于客户端的负载均衡能力。从多个服务提供方&#xff0c;选取一个节点发起调用。 Feign:NetFlix,SpringCloud 的第一代LB&#xff08;负载均衡&#xff09;客户端工具包。 OpenFeign:SpringCloud自研&#xff0c…

CMake支持的编译平台和IDE

文章目录 简介支持的IDEVisual Studio支持示例 其他编译器和生成器支持MinGW示例 IDE集成Eclipse示例 实验性和特殊平台支持总结 简介 CMake是一个非常强大的跨平台自动化构建工具&#xff0c;它支持生成多种类型的项目文件&#xff0c;覆盖了广泛的开发环境和编译器。在这篇博…

OpenHarmony之HDF驱动框架

概述 HDF&#xff08;Hardware Driver Foundation&#xff09;驱动框架&#xff0c;为驱动开发者提供驱动框架能力&#xff0c;包括驱动加载、驱动服务管理、驱动消息机制和配置管理。并以组件化驱动模型作为核心设计思路&#xff0c;让驱动开发和部署更加规范&#xff0c;旨在…

LOG滤波器原理探究---计算机视觉和特征检测

先来看几个滤波器公式&#xff1a; 高斯滤波器&#xff1a; G ( x , y ; σ ) 1 2 π σ 2 e − x 2 y 2 2 σ 2 G(x,y;\sigma) \frac{1}{2 \pi \sigma^2} e^{-\frac{x^2 y^2}{2\sigma^2}} G(x,y;σ)2πσ21​e−2σ2x2y2​ 图像的二阶导数&#xff1a; ∇ 2 f ∂ 2 f ∂…

ARM NEON 指令

NEON指令 按照操作数类型可以分为正常指令、宽指令、窄指令、饱和指令、长指令。 正常指令&#xff1a;生成大小相同且类型通常与操作数向量相同到结果向量。长指令&#xff1a;对双字向量操作数执行运算&#xff0c;生产四字向量到结果。所生成的元素一般是操作数元素宽度到…

How to understand the Trusted Intelligent Computing Service in Huawei Cloud

How to understand the Trusted Intelligent Computing Service in Huawei Cloud 概述什么是TICS产品架构TICS规格说明产品优势产品功能应用场景政企信用联合风控政府数据融合共治金融联合营销使能数据交易 快速入门TICS快速入门TICS使用流程简介入门实践 概述 什么是TICS 可信…

SpringBoot 集成支付宝支付

网页操作步骤 1.进入支付宝开发平台—沙箱环境 使用开发者账号登录开放平台控制平台 2.点击沙箱进入沙箱环境 说明&#xff1a;沙箱环境支持的产品&#xff0c;可以在沙箱控制台 沙箱应用 > 产品列表 中查看。 3.进入沙箱&#xff0c;配置接口加签方式 在沙箱进行调试前…

WPF+Halcon 培训项目实战(8-9):WPF+Halcon初次开发

文章目录 前言相关链接项目专栏运行环境匹配图片WPF Halcon组件HSmartWindowControlWPF绑定读取图片运行代码运行结果 抖动问题解决运行结果 绘制矩形绘制图像会消失 绘制对象绑定事件拖动事件 前言 为了更好地去学习WPFHalcon&#xff0c;我决定去报个班学一下。原因无非是想…

大模型时代下AIGC新浪潮

大模型时代下AIGC新浪潮 文章目录 大模型时代下AIGC新浪潮1. **相关概念**2. **迎接大模型时代**3. **ChatGPT引爆AIGC产业**4. **从产业链宏观看AIGC**1. **上游&#xff1a;基础层**2. **中游&#xff1a;技术层/模型层**1. **模型层介绍**2. **预训练大模型分类与介绍** 3. …

2023春季李宏毅机器学习笔记01 :正确认识 ChatGPT

资料 课程主页&#xff1a;https://speech.ee.ntu.edu.tw/~hylee/ml/2023-spring.phpGithub&#xff1a;https://github.com/Fafa-DL/Lhy_Machine_LearningB站课程&#xff1a;https://space.bilibili.com/253734135/channel/collectiondetail?sid2014800 一、对Chatgpt的误解…

MongoDB笔记

文章目录 安装查看数据库命令手册 学习地址&#xff1a;https://www.bilibili.com/video/BV16u4y1y7Fm 安装 下载地址 https://www.mongodb.com/try/download/community-kubernetes-operator查看数据库 查看当前数据库 show dbs show databases切换数据库 use 数据库名称cls…