位置: IT常识 - 正文

ElementUI中<el-form>标签中 ref、:model、:rules 的作用

编辑:rootadmin
ElementUI中<el-form>标签中 ref、:model、:rules 的作用

推荐整理分享ElementUI中<el-form>标签中 ref、:model、:rules 的作用,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

首先看一下代码

<el-form ref="loginForm" :model="loginInfo" :rules="loginRules" class="login-form" auto-complete="on" label-position="left" >ElementUI中<el-form>标签中 ref、:model、:rules 的作用

ref 属性涉及Dom 元素的获取(el-form表单对象)。 javaSrcipt 获取Dom 元素是通过:document.querySelector(".input")获取dom元素节点 。 Vue 为简化DOM获取方法提出了ref 属性和$refs 对象。一般的操作流程是:ref 绑定控件,$refs 获取控件。

Element官方文档中写到:

model是表单数据对象,rules是表单验证规则。

Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

里面的逻辑大概是,在el-form-item上写一个prop,这个prop左手对应着数据源(即用model.prop找到对应的数据源),右手对应着验证规则(即用rules.prop找到对应的规则),然后进行验证。

本文链接地址:https://www.jiuchutong.com/zhishi/296093.html 转载请保留说明!

上一篇:vue中 router.beforeEach() 的用法

下一篇:微信小程序开发 app.json全局配置(微信小程序开发零基础入门)

  • sony 微单a7(sony w70)(SONY 微单 镜头)

    sony 微单a7(sony w70)(SONY 微单 镜头)

  • 抖音访客记录怎么看(抖音访客记录怎么没有显示时间了)

    抖音访客记录怎么看(抖音访客记录怎么没有显示时间了)

  • word里怎么替换字(word里怎么替换图片)

    word里怎么替换字(word里怎么替换图片)

  • 为什么电脑开不起机按了没反应(为什么电脑开不了热点)

    为什么电脑开不起机按了没反应(为什么电脑开不了热点)

  • 购票失败是什么原因(购票失败是什么原因 – 阳光知识网)

    购票失败是什么原因(购票失败是什么原因 – 阳光知识网)

  • 红米10x支持nfc吗(红米10x参数支持nfc)

    红米10x支持nfc吗(红米10x参数支持nfc)

  • wifi版的平板可以插电话卡吗(wifi版的平板可以插网卡吗)

    wifi版的平板可以插电话卡吗(wifi版的平板可以插网卡吗)

  • 相机clog什么意思(相机cl模式是啥意思)

    相机clog什么意思(相机cl模式是啥意思)

  • 苹果手机下载的视频在哪里(苹果手机下载的视频在哪可以找到)

    苹果手机下载的视频在哪里(苹果手机下载的视频在哪可以找到)

  • excle视图分为哪几种(excel2010视图)

    excle视图分为哪几种(excel2010视图)

  • ps怎么清理暂存盘(如何清理ps暂存文件)

    ps怎么清理暂存盘(如何清理ps暂存文件)

  • 淘宝网创办于哪一年(淘宝网创办哪一年)

    淘宝网创办于哪一年(淘宝网创办哪一年)

  • ps怎么退出全屏模式(ps怎么退出全屏弄出任务栏)

    ps怎么退出全屏模式(ps怎么退出全屏弄出任务栏)

  • 苹果x是第几代产品(苹果x是第几代处理器)

    苹果x是第几代产品(苹果x是第几代处理器)

  • 手机蓝牙怎么连接汽车蓝牙导航(手机蓝牙怎么连接不上)

    手机蓝牙怎么连接汽车蓝牙导航(手机蓝牙怎么连接不上)

  • android用什么开发(android app用什么开发)

    android用什么开发(android app用什么开发)

  • 人民币是货币吗(港币以前比人民币值钱吗)

    人民币是货币吗(港币以前比人民币值钱吗)

  • 数字计算机模拟计算机分类依据(数字计算机模拟计算机)

    数字计算机模拟计算机分类依据(数字计算机模拟计算机)

  • 拼多多怎么扫码找商品(拼多多怎么扫码取件)

    拼多多怎么扫码找商品(拼多多怎么扫码取件)

  • 网易云点过的赞在哪看(网易云点过赞的评论)

    网易云点过的赞在哪看(网易云点过赞的评论)

  • 家庭云怎么投屏(家庭云能投屏吗?)

    家庭云怎么投屏(家庭云能投屏吗?)

  • airpodsa1602是几代(airpods怎么区分一代二代)

    airpodsa1602是几代(airpods怎么区分一代二代)

  • 快手怎么ktv直播(快手ktv直播间怎么放原唱)

    快手怎么ktv直播(快手ktv直播间怎么放原唱)

  • 暴风影音如何调整视频方向(暴风影音如何调整字幕)

    暴风影音如何调整视频方向(暴风影音如何调整字幕)

  • 为什么看抖音总是卡(为什么看抖音总是觉得那个人就是我)

    为什么看抖音总是卡(为什么看抖音总是觉得那个人就是我)

  • Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’ 问题解决方法(failed to execute goal org.apache)

    Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’ 问题解决方法(failed to execute goal org.apache)

  • 销项税减去进项税
  • 避税岛是什么
  • 什么是商业汇票和银行汇票
  • 企业所得税清算备案日和结束日怎么填
  • 普票能抵扣多少
  • 会计中计提是什么意思
  • 5元印花税怎么申报
  • 其他债权投资公允价值变动影响摊余成本吗
  • 应收账款的损失率怎么算
  • 增值税发票抵扣多少个点
  • 如何确定企业
  • 纳税申报表多缴了怎么办
  • 企业招待客户的费用
  • 债务豁免的会计分录
  • 银行承兑汇票利息怎么算
  • 咨询服务费是否可以税前扣除
  • 首次购置增值税税控系统
  • 支付给职工和为职工支付的现金
  • 出口贸易没有进口贸易
  • 印花税购销比例
  • 公司代扣的社保怎么做分录
  • 个人投资者
  • 外资股东是什么意思
  • 客户的佣金怎么处理
  • win7 扫描仪
  • 专项基金是什么
  • 财政拨款事业单位和全额事业单位
  • macbook无法调节音量
  • Win11 Build 22454.1000 开发者预览版发布(附更新修改已知问题+安装)
  • php变量定义的规则
  • 交际应酬费可以抵扣吗
  • php获取字符串位置
  • phpcms作者名不显示怎么解决
  • 怎么计算多个表格的某一数据
  • mongodb快速入门
  • 认缴制和实缴制的时间
  • 持有至到期投资属于流动资产吗
  • 一般纳税人必须有办公地点吗
  • 鲜花虫草开发票属于什么类别?
  • 进口货物如何支付外汇
  • 党费会计核算科目有哪些
  • 专用发票与普通发票的区别有
  • 发票已开款未到的会计分录?
  • 公司购买手表入什么科目
  • 无形资产处置的相关费用计入哪里
  • 什么叫进项税率
  • 确认收入一定要交增值税吗
  • 其他债权投资发生减值会影响所有者权益总额吗
  • 小规模纳税人销售自己使用过固定资产
  • 税局代开专用发票时交的钱如何记账?
  • 建筑业确认收入的条件
  • 保险可以税前扣除吗
  • 预计负债的会计和税务处理
  • 企业代购是什么意思
  • winxp系统纯净版
  • wlms.exe是什么
  • win8.1系统安装
  • winxp开启远程控制
  • win8换win10系统步骤
  • win10预览版好吗
  • linux下nanosleep() & sleep()的区别
  • linux 操作系统
  • win8桌面不显示
  • win10无法使用内置管理员账户
  • win10 cpu使用率高怎么办
  • 两个linux系统之间如何传文件
  • 解决胃胀气最快方法
  • bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
  • 列举linux常用的几个命令
  • sae定义及如何上报
  • JavaScript中的变量名不区分大小写
  • css下margin、padding、border、background和font缩写示例
  • angular jsx
  • 小助手是什么软件
  • js阻止浏览器后退
  • 村委会税务登记流程
  • 超市开发票每月额度,超了之后税率是多少
  • 国家电子税务局江西省电子税务局
  • 湖南国税网上营业厅
  • 潍坊市的职工医保多少钱
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设