vue实现性别选择

实现性别选择的 Vue 组件

在 Vue 中实现性别选择可以通过单选框、下拉菜单或按钮组等方式完成。以下是几种常见实现方法：

使用单选框（Radio Buttons）

<template>
  <div>
    <label>
      <input type="radio" v-model="gender" value="male"> 男
    </label>
    <label>
      <input type="radio" v-model="gender" value="female"> 女
    </label>
    <label>
      <input type="radio" v-model="gender" value="other"> 其他
    </label>
    <p>选择的性别: {{ gender }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gender: ''
    }
  }
}
</script>

使用下拉选择框（Select）

<template>
  <div>
    <select v-model="gender">
      <option value="">请选择性别</option>
      <option value="male">男</option>
      <option value="female">女</option>
      <option value="other">其他</option>
    </select>
    <p>选择的性别: {{ gender }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gender: ''
    }
  }
}
</script>

使用按钮组（Button Group）

<template>
  <div>
    <button 
      v-for="option in genderOptions" 
      :key="option.value"
      @click="gender = option.value"
      :class="{ active: gender === option.value }"
    >
      {{ option.label }}
    </button>
    <p>选择的性别: {{ gender }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gender: '',
      genderOptions: [
        { value: 'male', label: '男' },
        { value: 'female', label: '女' },
        { value: 'other', label: '其他' }
      ]
    }
  }
}
</script>

<style>
.active {
  background-color: #42b983;
  color: white;
}
</style>

表单验证

如果需要表单验证，可以结合 Vuelidate 或其他验证库：

<template>
  <div>
    <select v-model="gender" @blur="$v.gender.$touch()">
      <option value="">请选择性别</option>
      <option value="male">男</option>
      <option value="female">女</option>
    </select>
    <p v-if="$v.gender.$error">请选择性别</p>
  </div>
</template>

<script>
import { required } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      gender: ''
    }
  },
  validations: {
    gender: { required }
  }
}
</script>

自定义性别选择组件

可以封装为可复用的组件：

<!-- GenderSelector.vue -->
<template>
  <div class="gender-selector">
    <label v-for="option in options" :key="option.value">
      <input 
        type="radio" 
        v-model="selected" 
        :value="option.value"
        @change="onChange"
      >
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      default: () => [
        { value: 'male', label: '男' },
        { value: 'female', label: '女' },
        { value: 'other', label: '其他' }
      ]
    }
  },
  data() {
    return {
      selected: this.value
    }
  },
  methods: {
    onChange() {
      this.$emit('input', this.selected)
    }
  },
  watch: {
    value(newVal) {
      this.selected = newVal
    }
  }
}
</script>

使用时：

<gender-selector v-model="formData.gender"></gender-selector>

这些方法可以根据具体需求进行调整，比如添加更多性别选项、国际化支持或自定义样式。