element-ui中的单选框在表单中的使用
时间: 2024-12-31 18:49:30 浏览: 7
Element UI中的单选框组件通常用于创建选择列表,用户可以从选项中选择一个。在表单中,你可以使用`el-radio`元素来构建。以下是基本的使用步骤:
1. 首先,在HTML模板中引入Element UI的radio组件:
```html
<template>
<el-form label-width="80px">
<el-form-item label="性别">
<el-radio v-model="sex" @change="handleChange">男</el-radio>
<el-radio :label="2" v-model="sex">女</el-radio>
</el-form-item>
</el-form>
</template>
```
这里,`v-model`绑定到数据属性`sex`,表示当前选中的值。
2. 然后,在Vue实例中定义数据并处理改变事件:
```javascript
export default {
data() {
return {
sex: '男', // 初始值可以自定义
};
},
methods: {
handleChange(value) {
console.log('选择了', value); // 当值变化时,会触发这个方法
}
}
};
```
当用户点击单选按钮时,`handleChange`方法会被调用,`value`参数就是所选的值。
阅读全文