<template>
<div>
<el-form ref="form" :model="formData">
<el-form-item label="姓名">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model.number="formData.age"></el-input>
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="formData.email"></el-input>
</el-form-item>
</el-form>
<el-button type="primary" @click="submitForm">提交</el-button>
</div>
</template>
<script>
export default {
data() {
return {
formData: {
name: '',
age: null,
email: ''
}
};
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// TODO: 处理表单提交逻辑
} else {
console.log('校验失败');
}
});
}
}
};
</script>
在上述代码中,我们使用了 v-model 指令将 <el-input> 组件与 formData 数据对象进行双向绑定。
其中,通过 v-model.number 指令可以确保绑定的值为数字类型。
我们还用了 <el-form> 和 <el-form-item> 组件来创建表单,并通过 this.$refs.form 获取表单实例进行校验和提交。
在前端开发中,这种表单绑定数据的方式是非常常见的。