位置: IT常识 - 正文
ElementUI中＜el-form＞标签中 ref、:model、:rules 的作用
编辑：rootadminElementUI中＜el-form＞标签中 ref、:model、:rules 的作用 
本文链接地址:https://www.jiuchutong.com/zhishi/296093.html
转载请保留说明！
推荐整理分享ElementUI中＜el-form＞标签中 ref、:model、:rules 的作用，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
首先看一下代码
<el-form ref="loginForm" :model="loginInfo" :rules="loginRules" class="login-form" auto-complete="on" label-position="left" >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找到对应的规则），然后进行验证。
上一篇：vue中 router.beforeEach() 的用法
下一篇：微信小程序开发 app.json全局配置(微信小程序开发零基础入门)