vue使用element-ui的表单男女选择
时间: 2023-07-08 22:47:45 浏览: 243
你可以使用element-ui中的ElRadio和ElFormItem组件来实现男女选择表单。以下是一个示例代码:
```
<template>
<el-form :model="form" ref="form" label-width="100px">
<el-form-item label="性别">
<el-radio-group v-model="form.gender">
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</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: {
gender: '' // 默认为空
}
}
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
console.log(this.form)
// 在这里可以将表单数据提交到后端
} else {
console.log('表单验证失败!')
return false
}
})
}
}
}
</script>
```
在上面的示例中,使用了ElRadio和ElFormItem组件来实现男女选择表单,v-model指令绑定了form对象中的gender属性,用来记录用户选择的值。当用户选择男或女时,gender属性就会被相应地赋值为'male'或'female'。表单提交时,可以将form对象提交到后端进行处理。
阅读全文