当前位置：首页 > VUE

vue实现单选框

2026-02-24 02:03:15VUE

使用 Vue 实现单选框

基础实现

在 Vue 中，可以使用 v-model 指令绑定单选框的值。以下是一个简单的单选框组示例：

<template>
  <div>
    <label>
      <input type="radio" v-model="selectedOption" value="option1"> Option 1
    </label>
    <label>
      <input type="radio" v-model="selectedOption" value="option2"> Option 2
    </label>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

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

动态渲染选项

当选项需要从数据动态生成时，可以使用 v-for 指令：

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input type="radio" v-model="selectedOption" :value="option.value"> {{ option.text }}
    </label>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'option1', text: 'Option 1' },
        { value: 'option2', text: 'Option 2' },
        { value: 'option3', text: 'Option 3' }
      ]
    }
  }
}
</script>

自定义样式单选框

使用 CSS 隐藏原生单选框，通过 label 实现自定义样式：

<template>
  <div>
    <div class="radio-group">
      <label v-for="option in options" :key="option.value" :class="{ active: selectedOption === option.value }">
        <input type="radio" v-model="selectedOption" :value="option.value" class="hidden-radio">
        {{ option.text }}
      </label>
    </div>
  </div>
</template>

<style>
.hidden-radio {
  position: absolute;
  opacity: 0;
}

.radio-group label {
  padding: 8px 16px;
  border: 1px solid #ddd;
  margin-right: 5px;
  cursor: pointer;
}

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

组件化实现

将单选框封装为可复用的组件：

<!-- RadioGroup.vue -->
<template>
  <div class="radio-group">
    <label v-for="option in options" :key="option.value" :class="{ active: modelValue === option.value }">
      <input 
        type="radio" 
        :value="option.value" 
        @change="$emit('update:modelValue', option.value)"
        class="hidden-radio"
      >
      {{ option.text }}
    </label>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    modelValue: {
      type: [String, Number],
      required: true
    }
  },
  emits: ['update:modelValue']
}
</script>

使用组件：

vue实现单选框

<template>
  <div>
    <RadioGroup v-model="selectedOption" :options="options" />
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

<script>
import RadioGroup from './RadioGroup.vue'

export default {
  components: {
    RadioGroup
  },
  data() {
    return {
      selectedOption: 'option1',
      options: [
        { value: 'option1', text: 'Option 1' },
        { value: 'option2', text: 'Option 2' }
      ]
    }
  }
}
</script>