el-form :model
时间: 2023-11-20 15:17:23 浏览: 38
在 Element UI 中,`el-form` 组件是一个用于表单验证和数据收集的容器组件。 `:model` 是 `el-form` 组件的一个属性,用于绑定表单数据对象。
你可以将一个对象作为 `:model` 的值,该对象包含了表单的所有字段及其对应的值。通过绑定 `:model`,当用户修改表单字段的值时,绑定的数据对象也会相应地更新。
下面是一个示例代码,展示了如何使用 `el-form` 并绑定 `:model`:
```html
<template>
<el-form :model="form" ref="myForm" label-width="80px">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input-number v-model="form.age"></el-input-number>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
age: null
}
};
},
methods: {
submitForm() {
// 表单提交逻辑
if (this.$refs.myForm.validate()) {
// 表单验证通过
// 执行相关操作
}
}
}
};
</script>
```
在上述示例中,`:model="form"` 将表单数据对象 `form` 与 `el-form` 组件进行绑定。当用户在表单中输入数据时,`form` 对象的相应属性值也会更新。在 `submitForm` 方法中,可以通过 `this.form` 访问表单数据对象的值,并执行相应的操作。