vue绑定表单验证
<el-form ref="classform" :model="classform" :rules="classRules" label-width="80px">
<el-form-item label="转入班级" prop="classId">
<el-select v-model="classform.classId" placeholder="请选择转入的班级" clearable>
<el-option
v-for="item in educlassList"
:key=item.classId
:label=item.title
:value=item.classId
/>
</el-select>
</el-form-item>
</el-form>
ref
属性用于给当前组件设置一个引用标识,可以在父组件中通过 $refs
访问到这个组件实例。这通常用于触发某些方法,如表单验证、重置表单等。
model
属性用于绑定表单的数据模型对象。这个对象包含了表单的所有字段及其值。
rules是绑定的校验时判断的条件
提交表单验证时,通过refs访问到该实例,然后进行验证,他就会去演这rules 里面的规则
监听事件
我们可以使用 v-on
指令 (简写为 @
) 来监听 DOM 事件,并在事件触发时执行对应的 JavaScript。用法:v-on:click="handler"
或 @click="handler"
。
比如 select选择器中的监听事件
比如我在这里 点击select 框时才触发查询
focus
事件是指当一个输入框(如 <input>
或 <select>
)获得焦点时触发的事件。获得焦点通常发生在用户通过点击鼠标或使用键盘的 Tab
键导航到该元素上时。当元素获得焦点时,它通常会被高亮显示(例如,边框颜色的变化或者出现输入光标),并且可以接收用户的输入。