<!-- 表单 -->
<el-form ref="rulesForm" :rules="rules" :model="rules" label-width="200px">
<el-form-item prop="username">
<el-input type="text" v-model="loginForm.username" autocomplete="off" placeholder="用户名" prefix-icon="login-icon login-icon-user"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="loginForm.password" autocomplete="off" placeholder="密码" prefix-icon="login-icon login-icon-psw"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="loginFun('ruleForm')">登 录</el-button>
</el-form-item>
</el-form>
- <el-form>:代表这是一个表单
- <el-form> -> ref:表单被引用时的名称,标识
- <el-form> -> rules:表单验证规则
- <el-form> -> model:表单数据对象
- <el-form> -> label-width:表单域标签的宽度,作为 Form 直接子元素的 form-item 会继承该值
- <el-form> -> <el-form-item>:表单中的每一项子元素
- <el-form-item> -> label:标签文本
- <el-form-item> -> prop:表单域 model 字段,在使用 validate、resetFields 方法的情况下,该属性是必填的
- <el-input>:输入框
- <el-input> -> v-model:绑定的表单数据对象属性
- <el-input> -> style:行内样式
- <el-input> -> maxlength:最大字符长度限制