vue+elementui男女复选框实现

Vue和Element UI提供了一种简单的方式来实现男女复选框。以下是实现的步骤：

1. 首先，在Vue组件中导入Element UI的复选框组件：

import { CheckboxGroup, Checkbox } from 'element-ui';

2. 在Vue组件中注册复选框组件：

export default {
    components: {
        CheckboxGroup,
        Checkbox,
    },
    ...
}

3. 在模板中使用复选框组件来实现男女复选框：

<template>
    <div>
        <checkbox-group v-model="gender">
            <checkbox label="男">男</checkbox>
            <checkbox label="女">女</checkbox>
        </checkbox-group>
    </div>
</template>

4. 在Vue组件的`data`中定义`gender`数据属性：

export default {
    data() {
        return {
            gender: [], // 初始化为空数组
        };
    },
    ...
}

现在，当用户选择男或女复选框时，`gender`数据属性会更新为相应的值。如果用户选择了男复选框，则`gender`值将变为`['男']`；如果用户选择了女复选框，则`gender`值将变为`['女']`；如果用户同时选择男和女复选框，则`gender`值将变为`['男', '女']`。

如果要在Vue组件中获取选择的性别，可以直接访问`gender`数据属性。例如，通过`this.gender`可以获取到当前选择的性别。