el-form 双向绑定
时间: 2023-11-20 17:55:57 浏览: 56
el-form 双向绑定可以通过 v-model 指令实现。在 el-form 中,可以通过给 el-form-item 中的表单元素绑定 v-model 实现双向绑定。具体实现步骤如下:
1. 在 el-form 中添加 el-form-item,设置 label 和 prop 属性,prop 属性的值对应表单数据对象中的属性名。
2. 在 el-form-item 中添加表单元素,例如 input、select 等,通过 v-model 指令将表单元素与表单数据对象中的属性进行双向绑定。
3. 在 el-form 中添加提交按钮,通过 @submit.prevent 事件监听表单提交事件,在事件处理函数中获取表单数据对象并进行提交操作。
下面是一个示例代码:
```html
<template>
<el-form :model="form" label-width="80px" @submit.prevent="onSubmit">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="form.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" native-type="submit">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
age: 0
}
}
},
methods: {
onSubmit() {
// 提交表单数据
console.log(this.form)
}
}
}
</script>
```